jQuery Ajax使用FormData对象上传文件的方法

jQuery Ajax使用FormData对象上传文件的方法

在前端开发中，经常会遇到需要上传文件的业务需求。而在大多数情况下，我们都会使用jQuery Ajax来实现文件上传功能。本文将详细介绍如何使用FormData对象上传文件。

使用FormData对象上传文件的步骤

1. 创建FormData对象

通过FormData对象可以模拟表单提交的数据格式，实现异步上传文件的功能。创建方式如下：

var formData = new FormData();

1. 添加上传文件

通过append()方法向formData对象添加上传文件，其中第一个参数为表单域的name属性，第二个参数为文件对象，如下所示：

formData.append('file', fileObj);

其中，file表示表单域的name属性，fileObj为文件对象。

1. 发送请求

通过jQuery Ajax发送FormData对象，代码如下所示：

$.ajax({
  url: 'upload.php',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false,
  success: function (response) {
    console.log(response);
  }
});

其中，processData和contentType设置为false，表示不对数据进行序列化。

FormData对象上传文件示例

示例一：上传单个文件

HTML代码:

<input type="file" id="fileInput">
<button id="uploadBtn">上传文件</button>

JavaScript代码：

$('#uploadBtn').click(function () {
  var fileObj = $('#fileInput')[0].files[0];
  var formData = new FormData();
  formData.append('file', fileObj);
  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
      console.log(response);
    }
  });
});

PHP代码：

<?php
if ($_FILES["file"]["error"] > 0) {
  echo "Error: " . $_FILES["file"]["error"] . "<br>";
} else {
  move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . $_FILES["file"]["name"]);
  echo "上传成功！";
}
?>

示例二：上传多个文件

HTML代码：

<input type="file" id="fileInput" multiple>
<button id="uploadBtn">上传文件</button>

JavaScript代码：

$('#uploadBtn').click(function () {
  var fileObj = $('#fileInput')[0].files;
  var formData = new FormData();
  for (var i = 0; i < fileObj.length; i++) {
    formData.append('file[]', fileObj[i]);
  }
  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (response) {
      console.log(response);
    }
  });
});

PHP代码：

<?php
if ($_FILES["file"]["error"][0] > 0) {
  echo "Error: " . $_FILES["file"]["error"][0] . "<br>";
} else {
  for ($i = 0; $i < count($_FILES["file"]["name"]); $i++) {
    move_uploaded_file($_FILES["file"]["tmp_name"][$i], "uploads/" . $_FILES["file"]["name"][$i]);
  }
  echo "上传成功！";
}
?>

以上就是使用FormData对象上传文件的方法和示例。通过学习本文，相信您已经能够掌握这一知识点。