AJAX 实战文件上传功能

使用 AJAX 技术实现大附件文件的上传功能,包括单文件同步上传、多文件同步上传以及使用 FormData 异步上传等方式。

文件上传的格式

单文件同步上传

要实现单文件同步上传,需要使用multipart/form-data作为表单的enctype属性值。这样在提交表单时,浏览器会将文件作为二进制数据发送给服务器。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="text" name="filename" />
  <input type="file" name="file" />
  <input type="submit" value="上传" />
</form>

多文件同步上传

多文件同步上传可以通过在<input type="file">中添加multiple属性来实现。这样用户就可以一次选择多个文件进行上传。

另外,为了在服务器端能够正确接收到多个文件,需要将表单控件的name属性设置为数组形式,如name="file[]"。

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="text" name="filename" />
  <input type="file" name="file[]" multiple />
  <input type="submit" value="上传" />
</form>

或者也可以使用多个<input type="file">控件:

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="text" name="filename" />
  <input type="file" name="file[]" />
  <input type="file" name="file[]" />
  <input type="file" name="file[]" />
  <input type="file" name="file[]" />
  <input type="file" name="file[]" />
  <input type="submit" value="上传" />
</form>

使用 FormData 上传文件

FormData 是 XMLHttpRequest Level 2 新增的一个特性,它为表单数据的序列化提供了便利。我们可以利用 FormData 来实现 AJAX 文件上传。

需要注意的是,直接打印 FormData 对象时输出为空,这是因为 FormData 中的数据无法通过控制台输出。要访问其中的数据,需要使用 FormData 提供的一些方法。

<body>
  <input type="text" id="username" value="张三" />
  <input type="text" id="password" value="123" />
  <input type="submit" value="提交" id="submitBtn" />

  <script>
    const usernameInput = document.getElementById('username');
    const passwordInput = document.getElementById('password');
    const submitButton = document.getElementById('submitBtn');

    const formData = new FormData();

    submitButton.addEventListener('click', function () {
      formData.append('username', usernameInput.value);
      formData.append('password', passwordInput.value);
      console.log(formData); // 输出: FormData {}

      console.log('username: ' + formData.get('username')); // 获取数据

      formData.set('password', '123123123'); // 设置数据
      console.log(formData.get('password'));

      console.log(formData.has('username')); // 判断是否存在

      formData.delete('password'); // 删除数据
    });
  </script>
</body>

下面是使用 FormData 实现异步文件上传的示例

const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadBtn');

uploadButton.addEventListener('click', function () {
  const file = fileInput.files[0]; // 获取文件对象

  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload');

  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log('上传成功!');
    } else {
      console.error('上传失败!');
    }
  };

  xhr.send(formData); // 发送FormData对象
});

文件上传的格式​

单文件同步上传​

多文件同步上传​

使用 FormData 上传文件​

文件上传的格式

单文件同步上传

多文件同步上传

使用 FormData 上传文件