如何在ajax post中获取文件上传的状态

Posted 2023-02-22

【中文标题】如何在ajax post中获取文件上传的状态

【英文标题】：how to get the status of file upload in ajax post

【发布时间】：2014-06-19 10:42:04

【问题描述】：

当用户使用ajax调用上传多个文件时点击取消如何获取上传文件的状态。

这样我调用ajax请求上传文件：

 var request = $.ajax(
     url: 'files.php',
     type: 'POST',
     data: data,
     cache: false,
     contentType: false,
     processData: false,
     beforeSend: function () 
         $(".progressbar").show();
     ,
     xhr: function () 
         var xhr = $.ajaxSettings.xhr();
         if (xhr.upload) 
             xhr.upload.addEventListener('progress', showProgress, false);
         
         return xhr;
     ,
     success: function (data) 
         if (percentComplete <= 100) 
             $('#pb div').animate(
                 width: '100%'
             , 
                 step: function (now) 
                     $(this).text(Math.round(now) + '%');
                 ,
                 duration: 10
             );
         
         $('#uplcomp').append(data);
     
 );

如果用户点击取消按钮，我会这样做：

request.abort();

由于上面的语句只是中止了ajax请求，我没有得到任何响应，比如上传了多少文件，上传了多少mb等等......

谁能帮我解决这个问题？

【参考方案1】：

我认为您的问题没有默认方式。您正在寻找的信息 - 上传了多少文件 - 我的知识并未存储在 XMLHttpRequest 对象中。

我想（但从未尝试过）您可以为它创建一些自定义。 高级分析：跟踪您的上传进度服务器端。在您的数据库中存储有关上传的一些信息：要处理的文件数量、处理的文件数量、日期/时间、唯一的上传/会话 ID。当您中止上传或上传失败时，您可以根据唯一 ID 通过 ajax 从您的数据库中检索有关上传过程的信息，并将其显示在 UI 中。

注意：如果请求已经发送到服务器，那么即使我们中止请求，服务器也会处理请求，但客户端不会等待/处理响应。

希望这会有所帮助。

【讨论】：

这里是否可以不使用 db... 至少可以使用 xhr 显示当前上传的文件吗？

+1 让我清楚上传的文件存储在 XMLHttpRequest 中

如果不使用数据库，我看不到合适的解决方案。信息需要存储在某个地方，以便您稍后可以检索它。显示当前上传的文件：我认为最简单的方法是为每个需要上传的文件执行单独的 ajax 请求。通过这种方式，您可以在客户端知道您正在（不）工作的文件。因此，您可以轻松地在 UI 中呈现处理信息。考虑使用为您完成此类工作的现有上传脚本。我经常使用Dropzone.js，它显示了很多关于上传的信息。

我不想使用任何我不喜欢的第 3 方脚本......并且由于安全问题，我正在发出单个 ajax 请求。因为我的代码中有一些小错误。那么在一个 ajax 请求中我们可以做到这一点吗？如果可能的话，我怎样才能显示当前上传的文件名

我没有看到它在单个请求中工作并显示当前上传文件的信息。您必须逐个发送它们以显示信息，而不是一次发送所有文件。安全工作在这里是题外话。您应该使用 HTTPS 来加密您的数据。如果 1 个调用不安全，那么多个调用也将不安全。最后是一样的：用户将发送 1 个带有多个文件的请求，或者将使用 1 个文件发出多个请求。这不是安全工作的问题，而是客户端性能的问题。不过这不是问题，现在大多数客户端机器都是高端设备