js不用formdata怎么上传文件

在JavaScript中，不用FormData上传文件的几种方法包括使用XMLHttpRequest、Fetch API以及传统的HTML表单。使用XMLHttpRequest、使用Fetch API、使用传统HTML表单是主要的方式。接下来，我们详细介绍其中的一个方法：使用Fetch API。

使用Fetch API可以方便地上传文件，并且能够处理更多的自定义请求头和其他配置选项。具体步骤如下：

async function uploadFile(file) {
    const url = 'YOUR_UPLOAD_URL';
    const data = new Blob([file], { type: file.type });
    const response = await fetch(url, {
        method: 'POST',
        body: data,
        headers: {
            'Content-Type': file.type,
            'Content-Length': data.size
        }
    });
    if (response.ok) {
        console.log('File uploaded successfully');
    } else {
        console.error('File upload failed');
    }
}

以上是使用Fetch API上传文件的基本方法，接下来我们将深入探讨JavaScript中不同的方法和技巧，以帮助你更好地实现文件上传功能。

一、使用XMLHttpRequest

创建XMLHttpRequest对象

XMLHttpRequest（XHR）是传统的JavaScript API，用于在浏览器与服务器之间交互数据。我们可以使用它来上传文件。

function uploadFileUsingXHR(file) {
    const xhr = new XMLHttpRequest();
    const url = 'YOUR_UPLOAD_URL';
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', file.type);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('File uploaded successfully');
        } else if (xhr.readyState === 4) {
            console.error('File upload failed');
        }
    };
    const data = new Blob([file], { type: file.type });
    xhr.send(data);
}

处理进度事件

通过监听XMLHttpRequest的progress事件，可以获取上传进度，提供更好的用户体验。

function uploadFileWithProgress(file) {
    const xhr = new XMLHttpRequest();
    const url = 'YOUR_UPLOAD_URL';
    xhr.upload.onprogress = function (event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            console.log(`Upload progress: ${percentComplete}%`);
        }
    };
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', file.type);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('File uploaded successfully');
        } else if (xhr.readyState === 4) {
            console.error('File upload failed');
        }
    };
    const data = new Blob([file], { type: file.type });
    xhr.send(data);
}

二、使用Fetch API

基础用法

Fetch API是现代浏览器中提供的用于进行网络请求的接口。相比于XMLHttpRequest，Fetch API更为简洁和强大。

async function uploadFile(file) {
    const url = 'YOUR_UPLOAD_URL';
    const data = new Blob([file], { type: file.type });
    const response = await fetch(url, {
        method: 'POST',
        body: data,
        headers: {
            'Content-Type': file.type,
            'Content-Length': data.size
        }
    });
    if (response.ok) {
        console.log('File uploaded successfully');
    } else {
        console.error('File upload failed');
    }
}

使用Async/Await

使用Async/Await可以使代码更为简洁和易读。

async function uploadFileAsync(file) {
    try {
        const url = 'YOUR_UPLOAD_URL';
        const data = new Blob([file], { type: file.type });
        const response = await fetch(url, {
            method: 'POST',
            body: data,
            headers: {
                'Content-Type': file.type,
                'Content-Length': data.size
            }
        });
        if (response.ok) {
            console.log('File uploaded successfully');
        } else {
            console.error('File upload failed');
        }
    } catch (error) {
        console.error('Error occurred while uploading file:', error);
    }
}

三、使用传统HTML表单

使用表单提交

虽然传统的HTML表单提交方式较为简单，但仍然是有效的方法。

<form id="uploadForm" action="YOUR_UPLOAD_URL" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button type="submit">Upload</button>
</form>

监听表单提交事件

可以通过JavaScript监听表单提交事件，进行一些自定义操作。

document.getElementById('uploadForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);
    fetch(form.action, {
        method: form.method,
        body: formData
    }).then(response => {
        if (response.ok) {
            console.log('File uploaded successfully');
        } else {
            console.error('File upload failed');
        }
    }).catch(error => {
        console.error('Error occurred while uploading file:', error);
    });
});

四、进阶技巧和优化

多文件上传

可以通过循环处理实现多文件上传。

async function uploadMultipleFiles(files) {
    const url = 'YOUR_UPLOAD_URL';
    for (let file of files) {
        const data = new Blob([file], { type: file.type });
        const response = await fetch(url, {
            method: 'POST',
            body: data,
            headers: {
                'Content-Type': file.type,
                'Content-Length': data.size
            }
        });
        if (response.ok) {
            console.log(`${file.name} uploaded successfully`);
        } else {
            console.error(`${file.name} upload failed`);
        }
    }
}

使用项目管理系统

在团队协作项目中，使用项目管理系统可以大大提高效率。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这两个系统提供了丰富的协作和管理功能，能够很好地支持文件上传和管理。

处理大文件上传

对于大文件上传，可以使用分片上传技术，将大文件分成多个小片段分别上传。

async function uploadFileInChunks(file, chunkSize = 1024 * 1024) {
    const url = 'YOUR_UPLOAD_URL';
    const totalChunks = Math.ceil(file.size / chunkSize);
    for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
        const start = chunkIndex * chunkSize;
        const end = Math.min(start + chunkSize, file.size);
        const chunk = file.slice(start, end);
        const response = await fetch(url, {
            method: 'POST',
            body: chunk,
            headers: {
                'Content-Type': file.type,
                'Content-Range': `bytes ${start}-${end - 1}/${file.size}`
            }
        });
        if (!response.ok) {
            console.error(`Chunk ${chunkIndex} upload failed`);
            break;
        } else {
            console.log(`Chunk ${chunkIndex} uploaded successfully`);
        }
    }
}

五、总结

在JavaScript中，不用FormData上传文件的方法有多种，包括使用XMLHttpRequest、使用Fetch API、使用传统HTML表单。每种方法都有其优点和适用场景。通过结合这些方法，你可以根据实际需求选择最合适的文件上传方式。此外，使用研发项目管理系统PingCode和通用项目协作软件Worktile可以进一步提升团队协作效率，帮助你更好地管理和上传文件。希望本文能为你提供实用的参考和指导。