JavaScript实现form表单的多文件上传

使用 JavaScript 实现 form 表单的多文件上传，需要按照以下步骤进行：

1. HTML 部分
   在 HTML 中添加表单和 input 元素，其中 input 的 type 属性为 file，multiple 属性为 true，表示支持选择多个文件。例如：

<form id="form_upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file" multiple="multiple">
  <button type="submit">上传</button>
</form>

1. JavaScript 部分
   首先，获取到表单元素和 input 元素，监听表单的提交事件，阻止表单默认行为，使用 FormData 对象获取文件数据，然后使用 AJAX 将文件上传到服务器，最后处理上传结果。具体代码如下示例1：

var form = document.getElementById('form_upload');
var input = document.querySelector('input[type="file"]');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认行为
  var formData = new FormData(); // FormData 对象获取文件数据
  for (var i = 0; i < input.files.length; i++) {
    formData.append('file[]', input.files[i]);
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('文件上传成功');
    } else {
      console.log('文件上传失败');
    }
  };
  xhr.send(formData); // 使用 AJAX 将文件上传到服务器
});

在示例1中，使用 FormData.append() 方法将每个文件加入数据对象，文件数据的键名为 file[]，这里使用了[]来表示一个数组，后台接收时就可以循环处理文件。FormData 对象还可以添加其他表单数据，例如：formData.append('name', '张三');

示例2中给出异步上传进度的实现过程。使用 XHR.upload 对象监听 upload 事件，可以获取上传的实时进度。代码如下：

xhr.upload.addEventListener('progress', function(e) {
  if (e.lengthComputable) {
    var progress = (e.loaded / e.total) * 100;
    console.log(progress); // 实时获得上传进度
  }
});

通过监听 progress 事件，可以获取到上传数据的长度和当前上传的进度百分比。

需要注意的是，form 表单的 enctype 属性必须设置为 multipart/form-data，才能支持文件上传。与 form 表单一起传递的其他表单数据，也可以使用 FormData 对象来传递。