上传神器：用Ajax点亮你的文件上传进度条

2023-11-11 10:23:01

使用 Ajax 实时显示上传文件进度：告别等待的烦恼

上传文件是每个人都会经历的事情，但上传速度过慢可能会让人抓狂。想知道上传进度？使用进度条是最直观的办法。本文将指导你如何使用 Ajax 技术在上传文件时实现进度条的实时显示，告别漫长等待的烦恼。

Ajax 异步传输

Ajax（Asynchronous JavaScript and XML）是一种异步传输技术，允许你在不刷新页面的情况下向服务器发送请求并获取响应。在上传文件的场景中，你可以使用 Ajax 定期向服务器查询上传进度，然后将信息实时更新到进度条上。

HTML5 进度条

在页面上创建进度条，推荐使用 HTML5 的 <progress> 元素。

<progress id="progress-bar" value="0" max="100"></progress>

该进度条的 id 为 "progress-bar"，初始值为 0，最大值为 100。

Ajax 请求

接下来，我们需要使用 Ajax 向服务器发送请求。这里使用 jQuery 的 ajax() 函数。

$("#file-input").change(function() {
  var formData = new FormData();
  formData.append("file", this.files[0]);

  $.ajax({
    url: "upload.php",
    type: "POST",
    data: formData,
    contentType: false,
    processData: false,
    xhr: function() {
      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
          var percentComplete = (e.loaded / e.total) * 100;
          $("#progress-bar").val(percentComplete);
        }
      });
      return xhr;
    }
  });
});

这段代码执行以下操作：

当用户选择文件时，创建一个 FormData 对象，并将文件数据和进度条 id 发送到服务器。
使用 ajax() 函数向服务器发送 POST 请求，指定上传文件的 URL、请求类型、数据、内容类型和处理方式。
创建一个 XMLHttpRequest 对象，并监听上传进度事件。
在上传进度事件中，计算上传进度并更新进度条的值。

服务器端处理

最后，你需要在服务器端编写一个处理上传文件的脚本。这里就不赘述了。

XMLHttpRequest

另一种使用 Ajax 获取上传进度的替代方法是 XMLHttpRequest 对象。

var request = new XMLHttpRequest();
var progress = document.getElementById("progress-bar");
request.open("POST", "upload.php", true);

request.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    var percent_complete = (e.loaded / e.total) * 100;
    progress.value = percent_complete;
  }
};

request.send(formData);