中止多文件上传 AJAX 请求

Posted 2023-02-22

【中文标题】中止多文件上传 AJAX 请求

【英文标题】：Abort a multiple file upload AJAX request

【发布时间】：2015-01-02 22:44:45

【问题描述】：

我正在尝试使用进度条中止多文件上传，显示过程状态。

我想要实现的是在中止按钮单击时完全中止多个文件上传；停止进度条并清除在最初触发的多文件上传过程中可能已上传的每个文件。

下面是我的代码：

var AJAX = $.ajax( 
    xhr: function() 
        var XHR = new window.XMLHttpRequest();

        XHR.upload.addEventListener('progress', function(e) 
          if (e.lengthComputable) 

            var PROGRESS = Math.round((e.loaded/e.total)*100);
            $('#PROGRESS_BAR').text(PROGRESS);

         , false); return XHR; ,
    url        : '/php.php',
    type       : 'POST',
    data       : DATA,
    cache      : false,
    processData: false,
    contentType: false,
    beforeSend : function()  , 
    success    : function()   
);

$(document).on('click', '.ABORT', function(e)      
    AJAX.abort();
);

我使用上面的代码来动态上传带有进度条的图片。

我发现很多文章使用.abort() 来停止进程，但这似乎只适用于浏览器端而不是服务器端。

我可以通过什么方式完全停止上传：在客户端和服务器端，.abort() 无法让我获得理想的结果？

【参考方案1】：

试试这个：

var XHR = new window.XMLHttpRequest();
var AJAX = $.ajax( 
    xhr: function() 
        XHR.upload.addEventListener('progress', function(e) 
          if (e.lengthComputable) 

            var PROGRESS = Math.round((e.loaded/e.total)*100);
            $('#PROGRESS_BAR').text(PROGRESS);

         , false); return XHR; ,
    url        : '/php.php',
    type       : 'POST',
    data       : DATA,
    cache      : false,
    processData: false,
    contentType: false,
    beforeSend : function()  , 
    success    : function()   
);

$(document).on('click', '.ABORT', function(e)      
    XHR.abort();
);

【讨论】：

能否请您澄清一下您的代码和@user3565264 代码之间的区别？当用户取消上传时，服务器端的清理过程如何处理？

变化是 XHR 的可见性。将其移出功能后，单击功能可见。请看：w3schools.com/js/js_scope.asp