极简攻略：异步批量上传图片，进度一目了然

前端

2023-08-08 12:22:30

异步批量上传：告别图片上传的烦恼

简介

在当今互联网时代，图片已成为日常生活和工作中不可或缺的一部分。从电商平台的产品展示到社交媒体的分享，再到企业官网的宣传，都需要大量图片来丰富内容。然而，面对海量图片上传的需求，传统的方式往往效率低下，耗时费力。

异步批量上传技术

异步批量上传技术应运而生，它打破了传统方式的局限，实现了图片上传的并发处理，大大提高了上传效率。同时，进度条功能的加入，让用户可以实时跟踪上传进度，做到心中有数，省去焦急等待的烦恼。

如何使用异步批量上传技术

使用异步批量上传图片，您只需几个简单的步骤，即可轻松实现批量图片上传，告别繁琐操作，尽享极简体验。

1. 准备工作

选择合适的开发语言和框架，如 PHP + jQuery + Ajax。
设置服务器端脚本，用于处理文件上传请求。
在前端页面集成必要的代码，实现文件选择、上传和进度条显示。

2. 实现文件选择

使用 HTML5 的元素，为用户提供文件选择功能。
设置 multiple 属性，允许用户一次选择多个文件。

3. 异步上传

利用 Ajax 技术，实现文件上传的异步处理。
使用 FormData 对象，构造包含文件和其他数据的请求体。
调用 XMLHttpRequest 对象，发送文件上传请求。

4. 进度条显示

在前端页面，使用进度条组件或自定义元素，实时显示上传进度。
监听 XMLHttpRequest 对象的 progress 事件，获取上传进度信息。
更新进度条的显示值，让用户随时了解上传进度。

5. 上传完成

当所有文件上传完成后，服务器端脚本将返回响应，通知前端页面。
在前端页面，处理服务器端返回的响应，根据需要进行下一步操作，如图片预览或数据保存。

示例代码

前端代码：

<!DOCTYPE html>
<html>
<head>
  <script src="jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      $("#file-input").on("change", function() {
        var files = $(this)[0].files;
        if (files.length > 0) {
          var formData = new FormData();
          for (var i = 0; i < files.length; i++) {
            formData.append("files[]", files[i]);
          }
          $.ajax({
            url: "upload.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
              var xhr = new window.XMLHttpRequest();
              xhr.upload.addEventListener("progress", function(e) {
                if (e.lengthComputable) {
                  var percent = Math.round((e.loaded / e.total) * 100);
                  $("#progress-bar").css("width", percent + "%");
                }
              }, false);
              return xhr;
            },
            success: function(data) {
              alert("上传成功！");
              $("#progress-bar").css("width", "0%");
            },
            error: function(error) {
              alert("上传失败！");
            }
          });
        }
      });
    });
  </script>
</head>
<body>
  <input type="file" id="file-input" multiple>
  <div id="progress-bar"></div>
</body>
</html>

后端代码（PHP）：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $target_dir = "uploads/";
  if (!is_dir($target_dir)) {
    mkdir($target_dir, 0777, true);
  }
  $files = $_FILES["files"];
  foreach ($files["name"] as $key => $name) {
    $target_file = $target_dir . basename($name);
    move_uploaded_file($files["tmp_name"][$key], $target_file);
  }
  echo "上传成功！";
}
?>