基于jQuery Ajax实现上传文件

那么开始讲解“基于jQuery Ajax实现上传文件”的完整攻略。

准备工作

在进行上传文件前，需要准备以下工作：

1. HTML表单中必须含有一个文件上传组件，如下所示：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="uploadFile">
  <button type="submit">上传</button>
</form>

1. 引入jQuery库和HTML5文件上传插件，其中HTML5文件上传插件可以是blueimp/jQuery-File-Upload、Fine Uploader等等。这里以blueimp/jQuery-File-Upload插件为例，引入方式如下：

<link rel="stylesheet" href="//cdn.staticfile.org/blueimp-file-upload/9.19.1/css/jquery.fileupload.css">
<script src="//cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdn.staticfile.org/blueimp-file-upload/9.19.1/js/vendor/jquery.ui.widget.js"></script>
<script src="//cdn.staticfile.org/blueimp-file-upload/9.19.1/js/jquery.fileupload.js"></script>

jQuery Ajax上传文件示例

1. 使用FormData对象进行上传，示例代码如下：

$('#uploadForm').submit(function (e) {
  e.preventDefault();

  var formData = new FormData($("#uploadForm")[0]);
  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function (data) {
      console.log(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  });
});

1. 使用jQuery-File-Upload插件进行上传，示例代码如下：

$('#fileupload').fileupload({
  url: 'upload.php',
  dataType: 'json',
  replaceFileInput: false,
  done: function (e, data) {
    console.log(data.result);
  },
  fail: function (e, data) {
    console.log(data.errorThrown);
  }
});

完整攻略

根据上述准备工作和jQuery Ajax上传文件示例，可以总结出如下的完整攻略：

1. 在HTML表单中，添加一个文件上传组件，如上所示。

2. 引入jQuery库和HTML5文件上传插件，如上所示。

3. 使用FormData对象或jQuery-File-Upload插件进行上传。

4. 在JavaScript代码中，将上传文件的表单数据封装到FormData对象中，然后通过Ajax的方式将数据提交到后台。注意，使用FormData对象进行上传时必须将processData和contentType设置为false，否则会报错。

5. 在服务器端，通过从$_FILES超全局变量中获取上传文件的信息，将上传的文件保存到指定的目录中。

6. 后台代码示例：

<?php
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["uploadFile"]["name"]);
$extension = end($temp); // 获取文件后缀名
if ((($_FILES["uploadFile"]["type"] == "image/gif")
  || ($_FILES["uploadFile"]["type"] == "image/jpeg")
  || ($_FILES["uploadFile"]["type"] == "image/jpg")
  || ($_FILES["uploadFile"]["type"] == "image/pjpeg")
  || ($_FILES["uploadFile"]["type"] == "image/x-png")
  || ($_FILES["uploadFile"]["type"] == "image/png"))
  && ($_FILES["uploadFile"]["size"] < 20000)   // 限制文件大小
  && in_array($extension, $allowedExts)) {
  if ($_FILES["uploadFile"]["error"] > 0) {
    echo json_encode(array('status' => 'fail', 'message' => '上传失败'));
  } else {
    $filename = $_FILES["uploadFile"]["name"];
    move_uploaded_file($_FILES["uploadFile"]["tmp_name"], "./upload/" . $filename);
    echo json_encode(array('status' => 'success', 'message' => '上传成功'));
  }
} else {
  echo json_encode(array('status' => 'fail', 'message' => '非法文件格式'));
}
?>

以上就是基于jQuery Ajax实现上传文件的完整攻略和两条示例说明。