jQuery利用FormData上传文件实现批量上传

下面详细讲解“jQuery利用FormData上传文件实现批量上传”的完整攻略：

1. 使用FormData上传文件

1.1 创建表单

在HTML文件中，创建一个表单用来选取文件并上传，例如：

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

这个表单包含一个文件选择器，可以用来选择上传的文件，以及一个提交按钮。

1.2 获取文件并创建FormData

在JavaScript文件中，使用jQuery选择器获取表单元素并添加 submit 事件监听器，当用户点击提交按钮时，收集所有选定的文件并创建一个 FormData 对象。具体代码如下：

$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
      success: function(response) {
        console.log(response);
      },
      error: function(xhr, status, error) {
        console.log(xhr.responseText);
      }
    });
  });
});

在表单中使用 jQuery 的 submit 方法添加一个事件监听器，这个方法会阻止表单默认的提交行为，当用户点击提交按钮时自动触发 submit 事件。在 submit 方法中，创建一个新的 FormData 对象并将表单的所有数据添加到其中。然后使用 jQuery 的 ajax 方法将该 FormData 对象发送到服务器中的 /upload URL。

1.3 服务器处理上传的文件

在服务器端，将上传的文件保存到指定文件夹即可。

示例代码

使用Node.js和Express框架作为服务器端代码实现，如下所示：

const express = require('express');
const multer  = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.array('files'), function(req, res, next) {
  res.send('文件上传成功');
});

在上面的代码中，我们使用了 multer 中间件来处理文件上传。使用 upload.array('files') 即可处理前端传递过来的文件上传请求，其中 'files' 是前端表单中的 name 属性名。

2. 批量上传多个文件

2.1 创建多个文件选择器

在 HTML 文件中，创建多个文件选择器，例如：

<form id="myForm" method="post" enctype="multipart/form-data">
  <input type="file" name="files[]" multiple>
  <input type="file" name="files[]" multiple>
  <input type="file" name="files[]" multiple>
  <button type="submit">上传</button>
</form>

这个表单包含三个文件选择器，可以分别选择上传三个文件，以及一个提交按钮。

2.2 获取多个文件并创建FormData

在 JavaScript 文件中，修改 FormData 构造函数如下：

$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    $.each($('input[type=file]')[0].files, function(i, file) {
      formData.append('files[]', file);
    });
    $.each($('input[type=file]')[1].files, function(i, file) {
      formData.append('files[]', file);
    });
    $.each($('input[type=file]')[2].files, function(i, file) {
      formData.append('files[]', file);
    });
    $.ajax({
      url: '/upload',
      type: 'POST',
      data: formData,
      contentType: false,
      processData: false,
      success: function(response) {
        console.log(response);
      },
      error: function(xhr, status, error) {
        console.log(xhr.responseText);
      }
    });
  });
});

在 submit 函数中，将 FormData 构造函数从 this 修改为 new FormData()，并使用 $.each 方法循环多次，分别向表单中添加三个文件选择器中所选的文件。

2.3 服务器处理上传的文件

服务器端的处理与单个文件上传的处理方法相同。

示例代码

const express = require('express');
const multer  = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.array('files[]'), function(req, res, next) {
  res.send('文件上传成功');
});

在这个示例代码中，使用 multer 中间件来处理表单提交的文件，其中 array() 方法的参数 'files[]' 对应了前端表单中的 name 属性名。

总结

以上就是使用 FormData 对象实现文件上传的基本方法。如果要实现批量上传多个文件，只需要在前端表单中添加多个文件选择器，并分别将选中的文件添加到 FormData 对象中即可。在服务器端，使用 multer 中间件即可轻松处理文件上传请求。