ajax 多文件上传-示例代码

AJAX多文件上传是一种在网页中使用异步请求技术实现同时上传多个文件的方法。传统的文件上传方式会导致页面刷新，而使用AJAX多文件上传可以在不刷新页面的情况下实现文件上传操作，提升用户体验。

示例代码如下所示：

// HTML部分
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="files[]" multiple>
  <button type="submit">上传文件</button>
</form>
// JavaScript部分
const form = document.getElementById('uploadForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  const files = form.elements['files[]'].files; // 获取文件列表
  const formData = new FormData(); // 创建FormData对象
  for (let i = 0; i < files.length; i++) {
    formData.append('files[]', files[i]); // 将每个文件添加到FormData对象中
  }
  const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
  xhr.open('POST', '/upload', true); // 设置请求方法、URL和异步标志
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('文件上传成功');
    } else {
      console.error('文件上传失败');
    }
  };
  xhr.send(formData); // 发送FormData对象
});

在上述示例代码中，我们首先在HTML部分创建了一个表单，其中包含一个文件选择框和一个提交按钮。当用户选择了文件并点击提交按钮时，会触发submit事件。

在JavaScript部分，我们通过addEventListener方法为表单的submit事件添加了一个监听器。在监听器中，我们首先调用event.preventDefault()方法阻止表单的默认提交行为。

然后，我们通过form.elements['files[]'].files获取到用户选择的文件列表。接下来，我们创建了一个FormData对象，并使用append方法将每个文件添加到FormData对象中。

接着，我们创建了一个XMLHttpRequest对象，并使用open方法设置了请求方法（POST）、URL（/upload）和异步标志（true）。然后，我们通过设置xhr.onload方法来处理请求完成后的回调函数。

我们调用xhr.send方法发送FormData对象，即开始进行文件上传操作。上传完成后，根据xhr.status的值来判断上传是否成功，并进行相应的处理。

通过以上的示例代码，我们可以实现在网页中使用AJAX技术同时上传多个文件的功能。