jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】

下面是详细讲解jquery+ajax实现上传图片并显示上传进度功能的完整攻略。

一、准备工作

新建一个文件夹，包含index.html和upload.php两个文件
下载jquery-3.6.0.min.js并放到文件夹里
设定upload.php接收上传文件并保存到指定目录

二、HTML页面

在index.html中添加以下HTML结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>上传图片并显示上传进度</title>
</head>
<body>
  <h2>上传图片并显示上传进度</h2>
  <form enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <br><br>
    <input type="button" value="上传图片" id="uploadBtn">
  </form>
  <div id="progressBar" style="margin-top: 20px; width: 300px; height: 20px; background-color: #eee;">
    <div id="progress" style="height: 100%; width: 0%; background-color: #0c0;"></div>
  </div>

  <script src="jquery-3.6.0.min.js"></script>
  <script src="index.js"></script>
</body>
</html>

其中，包含一个form表单和一个上传按钮，上传成功后会显示上传进度条。

三、javascript代码

在index.js中添加以下代码：

$(function () {
  // 绑定上传按钮点击事件
  $("#uploadBtn").click(function () {
    var formdata = new FormData();
    var file = $("#file")[0].files[0];
    // 判断是否选择了文件
    if (!file) {
      alert("请先选择上传文件！");
      return;
    }
    formdata.append("file", file);

    $.ajax({
      url: "upload.php",
      type: "POST",
      cache: false,
      data: formdata,
      processData: false,
      contentType: false,
      xhr: function () {
        var xhr = new XMLHttpRequest();
        // 上传进度处理
        xhr.upload.addEventListener("progress", function (e) {
          if (e.lengthComputable) {
            var percent = Math.round((e.loaded / e.total) * 100);
            $("#progress").css("width", percent + "%").text(percent + "%");
          }
        }, false);
        return xhr;
      },
      success: function (data) {
        // 上传成功后处理
        alert(data);
        $("#progress").css("width", "0%").text("");
        $("#file").val("");
      },
      error: function (xhr) {
        // 上传失败后处理
        alert(xhr.responseText);
      }
    });
  });
});

这里使用jquery的AJAX方法来处理文件上传，formData对象可以方便地将文件添加到上传请求的正文中；xhr对象可用来监听上传进度信息。

四、PHP后台

在upload.php中添加以下代码：

<?php
// 允许上传的文件类型和大小
$allowTypes = array('jpeg', 'jpg', 'png', 'gif');
$maxSize = 2 * 1024 * 1024; // 2MB

// 判断是否存在文件
if (!isset($_FILES['file'])) {
  die(json_encode(array('error' => '文件不存在！')));
}

// 判断是否为合法文件
$file = $_FILES['file'];
$fileType = pathinfo($file['name'], PATHINFO_EXTENSION);
if (!in_array($fileType, $allowTypes)) {
  die(json_encode(array('error' => '文件类型不支持！')));
}
if ($file['size'] > $maxSize) {
  die(json_encode(array('error' => '文件大小不能超过2MB！')));
}

// 将文件保存到服务器
$uploadDir = 'uploads/';
if (!file_exists($uploadDir)) {
  mkdir($uploadDir);
}
$fileName = time() . '.' . $fileType;
$filePath = $uploadDir . $fileName;
if (!move_uploaded_file($file['tmp_name'], $filePath)) {
  die(json_encode(array('error' => '上传失败，请重试！')));
}

// 上传成功
echo json_encode(array('success' => '上传成功！', 'filePath' => $filePath));
?>

在接收到上传文件后，首先要判断文件是否存在以及文件类型和大小是否合法，然后将文件保存到指定目录中。最后返回上传成功或失败信息，以及文件在服务端的路径。

五、示例说明

示例1：上传成功

选择一张jpg格式一张图片（大小不超过2MB），点击上传按钮，进度条开始显示上传进度，上传成功后会弹出提示框。另外，成功上传后，在页面上可以看到已上传的图片。

<!-- 在body中添加以下HTML结构 -->
<img src="" id="uploadedImg" style="display: none;">

// 在index.js中的success回调函数中添加以下代码
$("#uploadedImg").attr("src", data.filePath).css("display", "block");

示例2：上传失败

选择大小超过2MB的文件，点击上传按钮，弹出提示框提示上传失败。

完整代码

完整的代码已上传到GitHub：https://github.com/KevinMaVincent/jquery-ajax-upload-demo，可以通过clone或下载zip的方式获取完整代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】 - Python技术站