Question

我使用这段代码通过ajax将文件上传到我的网站：

   jQ(document).on('submit', '#upload_file', function(e) {

      e.preventDefault();
      jQ('#mensagem').html('<div class="loader" style="text-align: center;">Enviando arquivo...</div>');
      jQ.ajaxFileUpload({
         url         :'<?php echo base_url('chamados/anexar_arquivo')?>', 
         secureuri      :false,
         fileElementId  :'userfile',
         dataType    : 'json',
         data        : {
            'desc' : jQ('#desc').val(),
            'chamado' : jQ('#codigochamado').val()
         },
         success : function (data, status)
         {
            if(data.status != 'error')
            {
               jQ('#anexos').html('Carregando anexos...');
               refresh_files();
               jQ('#desc').val('');
                var alert = '<div class="alert alert-success fade in"><button type="button" class="close" data-dismiss="alert">×</button>';
            }
            else
            {
               var alert = '<div class="alert alert-danger fade in"><button type="button" class="close" data-dismiss="alert">×</button>';
            }
            jQ('#mensagem').html(alert+data.msg+'</div>');
         }

      });
   });

它很棒！用户选择文件，单击“上传”然后我加载一个加载gif，直到它被成功 - 或错误 - 消息替换。

问题是，当文件上传时，它会显示在浏览器上，你可以取消通话，点击浏览器上的“X”按钮。当我这样做时，加载gif不会消失，并且即使上传过程中止，它也会继续显示“上传文件...”。

有没有办法检查上传是否已中止，以便我可以通过“上传用户上传”消息更新屏幕？

我在ajax调用的参数上尝试了error: function(e){}，但是当进程中止时它似乎没有传递给它。

Answer 1

编辑：有一个HTML5事件，progress，您可以检查更改并停止Ajax，以及上传动画，它不会在几秒钟内显示更改。看起来您正在使用某些文件上传插件，所以我不确定是否可以通过它轻松完成。使用普通的jQuery，它可能如下所示。注意我根本没有测试过这个，但它至少可以提供一个起点。编辑数字120以更改检查上传进度之间等待的时间（以秒为单位）：

var lastProgress;
var lastTime = new Date() / 1000;
$.ajax( { 
    xhr: function(){  
        var xhr = new window.XMLHttpRequest(); 
        xhr.upload.addEventListener("progress", function(evt){
            var newTime = new Date() / 1000;
            if (newTime > lastTime + 120){
                if (evt.lengthComputable) {
                    if (evt.loaded == lastProgress) {
                        ...[stop the upload graphic etc]...
                    } else { 
                        lastTime = newTime;
                        lastProgress = evt.loaded;
                    }
                }
        }, false);
    return xhr;
    },

    url: ... 
        ... [and the rest of the ajax parameters] ...
});

原始答案：我知道这种警察，但您可以在表单中提供自己的停止按钮。如果他们想要取消上传，您可以指示用户点击它而不是浏览器停止按钮。

就我所见，似乎没有办法真正检测浏览器停止按钮的点击次数。

另见：Jquery Browser's stop button event

如何检查用户是否中断了ajax上传

1 个答案: