ajax 上传 显示进度

Ajax上传显示进度

Ajax（Asynchronous JavaScript and XML）是一种用于创建Web应用程序的技术，它可以在不重新加载整个页面的情况下与服务器进行异步通信。Ajax上传是指通过Ajax技术将文件或数据上传到服务器。在这篇文章中，我们将探讨如何使用Ajax上传文件并显示上传进度。

在很多网站上，我们都可以见到文件上传功能。假设我们正在开发一个图片分享网站，在用户上传图片时，我们希望能够实时显示上传进度条，以提供更好的用户体验。通过Ajax上传并显示进度，可以让用户清楚地看到文件上传的过程，减少用户的等待时间。

首先，我们需要一个文件上传的表单。以下是一个简单的HTML表单：

<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload" name="submit">
</form>

通过上面的表单，用户可以选择要上传的文件，并点击"Upload"按钮来触发上传操作。接下来，我们需要使用jQuery的Ajax函数来处理上传过程和显示进度。

$("#uploadForm").submit(function(e) {
  e.preventDefault(); // 阻止表单提交

  var formData = new FormData($(this)[0]);
  $.ajax({
    url: "upload.php",type: "POST",data: formData,processData: false,contentType: false,xhr: function() {
      var xhr = new window.XMLHttpRequest();
      // 处理上传进度
      xhr.upload.addEventListener("progress",function(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round((evt.loaded / evt.total) * 100);
          // 更新进度条
          $(".progress-bar").width(percentComplete + "%").html(percentComplete + "%");
        }
      },false);
      return xhr;
    },success: function(response) {
      // 处理上传成功后的操作
    },error: function(jqXHR,textStatus,errorThrown) {
      // 处理上传出错后的操作
    }
  });
});

上面的代码中，我们首先阻止了表单的默认提交行为。然后，我们创建了一个FormData对象，该对象包含了要上传的文件。接下来，我们使用Ajax函数向服务器发送一个POST请求，其中包含了文件数据。同时，我们还通过设置processData和contentType参数为false，使得不对数据进行序列化和修改请求的数据类型。

在xhr参数的函数中，我们使用了XMLHttpRequest对象的upload事件监听函数来处理上传进度。在这个监听函数中，我们首先检查进度是否可计算（lengthComputable），然后计算上传百分比。最后，我们通过更新进度条的宽度和显示进度百分比来实时显示上传进度。

当上传完成后，服务器将返回上传成功或失败的信息。我们可以在success和error回调函数中对这些信息进行处理，例如显示上传成功或失败的提示。

综上所述，通过使用Ajax上传并显示进度，我们可以提供更好的用户体验。用户可以清楚地看到上传文件的进展，而不需要等待页面加载完毕。这在涉及大文件上传的场景中尤其有用。