jQuery+ajax实现文件上传功能

实现文件上传功能可以使用jQuery和ajax技术，下面是具体实现步骤：

步骤一：前端页面设计

首先需要设计一个前端页面来上传文件。可以使用一个表单来搜集用户的文件，然后用户选择文件后，通过JavaScript将文件上传到服务端。

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

这里我们通过enctype属性指定了表单数据应该以Multipart/form-data的方式编码。例子表单中的文件选择器选择的文件可以通过JavaScript来进行处理。

步骤二：jQuery编写

我们将使用jQuery来处理从表单中选择的文件并通过ajax将其上传到服务端。需要引入jQuery库。

$(document).ready(function(){
  $("#uploadForm").submit(function(event){
    event.preventDefault();
    var formData = new FormData(this);
    $.ajax({
      url: "upload.php",
      type: "POST",
      data: formData,
      processData: false,
      contentType: false,
      success: function(response){
        console.log(response);
      },
      error: function(jqXHR, textStatus, errorThrown){
        console.log(textStatus);
      }
    });
  });
});

这段代码通过提交表单事件捕捉的方式，防止表单提交而触发提交事件。我们首先使用FormData API创建一个formData变量，在下面的ajax请求中我们把这个formData变量同时传递到服务端。这个ajax请求后，将会向"upload.php"这个URL发送一个POST请求，然后处理从服务器返回的响应数据。

步骤三：后端服务配置

在服务端你需要一个文件接收脚本来接收ajax请求并将文件保存到服务器上。同时，你需要一些允许上传文件的配置。我们基于PHP代码来实现。

$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file-upload"]["name"]);
$uploadStatus = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// 允许上传的文件类型
$allowType = array('jpg', 'jpeg', 'png', 'gif');

if (in_array($imageFileType, $allowType)) {
  if (move_uploaded_file($_FILES["file-upload"]["tmp_name"], $target_file)) {
      echo "The file ". basename( $_FILES["file-upload"]["name"]). " has been uploaded.";
    } else {
       echo "Sorry, there was an error uploading your file.";
    }
} else {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
}

这段PHP代码首先定义了一个目标存储文件的文件夹，将文件名通过内置函数basename函数得到并赋值给$target_file变量。$uploadStatus设置为1，表示可以上传任何类型的文件。$imageFileType变量用于指定文件的类型，只允许上传指定的文件类型。$allowType数组指定允许上传的文件类型。

接着，在后端代码中，由于ajax格式的请求没有默认的$_REQUEST，所以我们只能使用$_FILES超级变量去获取上传的文件。这里我们使用了move_uploaded_file()的函数来将文件从服务器临时目录移动到指定文件夹。

示例1：

全代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery实现文件上传功能</title>
</head>
<body>

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

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#uploadForm").submit(function(event){
        event.preventDefault();
        var formData = new FormData(this);
        $.ajax({
          url: "upload.php",
          type: "POST",
          data: formData,
          processData: false,
          contentType: false,
          success: function(response){
            console.log(response);
          },
          error: function(jqXHR, textStatus, errorThrown){
            console.log(textStatus);
          }
        });
      });
    });
  </script>

</body>
</html>

示例2：

<?php
$allowType = array('jpg', 'jpeg', 'png', 'gif');
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file-upload"]["name"]);
$uploadStatus = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

if (in_array($imageFileType, $allowType)) {
  if (move_uploaded_file($_FILES["file-upload"]["tmp_name"], $target_file)) {
      echo "The file ". basename( $_FILES["file-upload"]["name"]). " has been uploaded.";
    } else {
       echo "Sorry, there was an error uploading your file.";
    }
} else {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
}
?>

总结：使用jQuery和ajax实现文件上传功能的步骤包括：设计前端页面、jQuery编写、后端服务配置，其中需要允许上传文件的配置，可以限定允许上传的文件类型。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+ajax实现文件上传功能 - Python技术站