jQuery用FormData实现文件上传的方法

下面我会给你详细介绍使用jQuery的FormData实现文件上传的过程和代码示例。

FormData简介

FormData 是一种支持 AJAX 文件上传的技术。当使用 FormData 对象来上传文件时，文件内容被读取为二进制数据，直接发送到服务器，可实现多文件上传。

使用 FormData 对象能够更轻松地将表单数据发送给服务器，不需要自己构建数据包，也不需要手动编写 Ajax 请求。

前置条件

• 需要 jQuery 库
• 必须使用支持 HTML5 的浏览器

实现过程

首先，我们需要准备一个 HTML 表单，其中包含一个文件上传的 input 标签。

<form enctype="multipart/form-data" id="uploadForm">
  <input type="file" name="file" id="fileInput" />
  <input type="button" value="上传" id="uploadBtn" />
</form>

我们在 form 表单中指定了 enctype 属性为 multipart/form-data，告诉服务器这个表单提交的内容包含文件。

注意：enctype 属性必须设为 multipart/form-data，否则无法上传文件。

接下来，我们需要编写 JavaScript 代码来实现上传文件的功能。以下是示例代码：

$(document).ready(function() {
  $("#uploadBtn").click(function() {
    // 获取表单数据
    var formData = new FormData($("#uploadForm")[0]);

    // 使用ajax发送表单数据
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(response) {
        alert(response);
      }
    });

    return false;
  });
});

以上代码中，我们使用了 jQuery 库的 $.ajax() 方法来发送表单数据。

• url：上传文件的服务器端地址，此处为 'upload.php'，需实际指定。
• type：使用 POST 方法提交表单数据。
• data：表单数据，即创建的 FormData 对象。
• async：false 表示使用同步请求，避免回调函数没执行完就执行后面的代码。
• cache：false 表示不缓存上传的文件。
• contentType：false 表示不设置请求头的 Content-Type 属性，让浏览器自动根据上传文件类型来设置。
• processData：false 表示不需要去处理formData数据。

在请求成功后，$.ajax() 回调函数会把服务器返回的内容打印出来。

示例

下面给出两个具体的文件上传示例：

上传多个文件

<form enctype="multipart/form-data" id="uploadForm">
  <input type="file" name="file1" id="fileInput1" />
  <input type="file" name="file2" id="fileInput2" />
  <input type="button" value="上传" id="uploadBtn" />
</form>

对于多个文件上传，只需要在表单中添加多个文件输入框，并指定不同的 name 属性值即可。

$(document).ready(function() {
  $("#uploadBtn").click(function() {
    // 获取表单数据
    var formData = new FormData($("#uploadForm")[0]);

    // 使用ajax发送表单数据
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(response) {
        alert(response);
      }
    });

    return false;
  });
});

上传文件的同时传递参数

<form enctype="multipart/form-data" id="uploadForm">
  <input type="file" name="file" id="fileInput" />
  <input type="text" name="username" id="usernameInput" />
  <input type="button" value="上传" id="uploadBtn" />
</form>

我们在表单中添加了一个文本输入框，用于输入用户名。

$(document).ready(function() {
  $("#uploadBtn").click(function() {
    // 获取用户输入
    var username = $("#usernameInput").val();

    // 获取表单数据
    var formData = new FormData($("#uploadForm")[0]);

    // 在表单数据中添加用户输入
    formData.append("username", username);

    // 使用ajax发送表单数据
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(response) {
        alert(response);
      }
    });

    return false;
  });
});

以上代码中，我们使用 FormData 对象的 append() 方法，将用户名添加到表单数据中，从而实现了文件上传的同时传递参数的功能。

总体而言，通过以上详细步骤和示例代码，你可以使用jQuery的FormData实现文件上传的功能，而且因为FormData的可扩展性，你还可以根据需求来自定义定更复杂的文件上传。