中止多文件上传AJAX请求 [英] Abort a multiple file upload AJAX request

问题描述

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

I am trying to abort a multiple file upload with a progress bar, showing the state of the process.

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

What I want to achieve is to completely abort the multiple file upload on the abort button click; to stop the progress bar as well as to clear every file(s) that might have been uploaded during the course of the initially triggered multiple file upload process.

下面是我的代码:

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

我使用上面的代码通过进度条动态上传图像.

I use the code above to dynamically upload images with a progress bar.

我发现很多文章都使用.abort()来停止该过程，但这似乎仅在浏览器端有效，而在服务器端无效.

I found lots of articles using .abort() to stop the process, but that seemed to only work browser side and not server side.

我可以用什么方式完全停止上载:在客户端和服务器端，由于.abort()不能使我获得理想的结果?

In what way can I cease the upload completely as in: on both client and server side as .abort() does not enable me get the desirable result?

推荐答案

尝试一下:

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请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！