Question

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

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

以下是我的代码：

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()无法获得理想的结果吗？

Answer 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();
});

中止多文件上传AJAX请求

1 个答案: