js上传文件的方法

在网页开发中，实现文件上传功能是一个常见的需求。JavaScript 提供了多种方式来实现文件上传，下面将详细介绍几种常用的方法。

使用表单提交上传文件

这是最基础的方式。首先创建一个 HTML 表单，设置 enctype="multipart/form-data"，这是为了正确处理文件数据。然后添加一个文件输入框 <input type="file">，用户通过它选择要上传的文件。当用户点击提交按钮时，表单数据（包括文件）会被发送到服务器端。在 JavaScript 中，可以通过监听表单的 submit 事件来处理表单提交逻辑，例如验证文件类型和大小等。

<form id="uploadForm" enctype="multipart/form-data" action="upload.php">
    <input type="file" id="fileInput">
    <input type="submit" value="上传">
</form>
<script>
    const form = document.getElementById('uploadForm');
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];
        if (file) {
            // 可以在这里添加文件类型和大小验证
            form.submit();
        }
    });
</script>

使用 XMLHttpRequest 上传文件

XMLHttpRequest（XHR）提供了更灵活的文件上传控制。首先获取文件对象，然后创建一个 FormData 对象，将文件添加到其中。接着创建一个 XHR 对象，设置请求方法、URL 等，并发送 FormData 对象。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function () {
    const file = this.files[0];
    const formData = new FormData();
    formData.append('file', file);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
    xhr.send(formData);

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('文件上传成功');
        }
    };
});

使用 Fetch API 上传文件

Fetch API 是现代 JavaScript 中用于进行网络请求的接口。同样先创建 FormData 对象并添加文件，然后使用 fetch 方法发送请求。

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', async function () {
    const file = this.files[0];
    const formData = new FormData();
    formData.append('file', file);

    const response = await fetch('upload.php', {
        method: 'POST',
        body: formData
    });

    if (response.ok) {
        console.log('文件上传成功');
    }
});

不同的方法适用于不同的场景，开发者可以根据项目的具体需求来选择合适的文件上传方式，以实现高效、稳定的文件上传功能。