javascript - jquery 文件上传的全局开始/结束事件

Question

我正在阅读有关 jQuery 文件上传（API 选项）的文档，并且似乎没有表示“我正在开始”和“我完成了”的事件。有启动和停止，但每次执行的文件上传都会调用它们。

有谁知道我没有看到的事件，或者对如何模拟全局启动/停止操作有建议？

Answer 1

其实应该是stop回调函数。

stop

Callback for uploads stop, equivalent to the global ajaxStop event (but for file upload requests only).

Example:

function (e) {
    console.log('Uploads finished');
}

https://github.com/blueimp/jQuery-File-Upload/issues/990

Answer 2

您可以使用progressall：

function (e, data) {
    var progress = parseInt(data.loaded / data.total, 10);
    if( progress === 1) {
        //done :)
    }
}

Answer 3

我最接近全局“开始”的是处理拖放/更改/粘贴事件：

$('input[type="file"]').fileupload({
  // config here...
}).bind('fileuploaddrop fileuploadchange fileuploadpaste', function(e, data) {
  console.log('Global start');
});

这个处理程序只会触发一次；在用户开始上传之后，在处理文件队列（或任何远程上传）开始之前。

如果您没有进行客户端文件验证，@Kamel 的答案适用于全局“结束”（如文档所示）。

如果您确实验证了客户端，您可能还需要处理上传导致没有触发 ajax 上传的情况。为此，我首先记录了上传的文件，然后在所有文件都被客户端拒绝或在 ajax 上传后成功/失败/中止后触发“结束”：

var selectedFiles = [];    
$('#fileUpload').fileupload({
    url: '//jquery-file-upload.appspot.com/',
    //url: '//does.not.exist/',
    dataType: 'json',
    singleFileUploads: true,
    // validate client-side: only allow '.png' files
    acceptFileTypes: /(\.|\/)png$/i,
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name).appendTo('#files');
        });
    },
    processfail: function (e, data) {
        var currentFile = data.files[0];
        console.log(currentFile.name, 'cannot be uploaded');
        if (data.files.error && currentFile.error) {
            setFileDone(currentFile.name);
        }
    },
    always: function (e, data) {
        setFileDone(data.files[0].name);
    }
}).bind('fileuploaddrop fileuploadchange fileuploadpaste', function(e, data) {
    selectedFiles = data.files.map(function(f) { return f.name; });
    console.log('Global start');
});

var setFileDone = function(fName) {
    selectedFiles.pop(fName);
    if (!selectedFiles.length) {
        console.log('Global end');
    }
};

在 jsbin 上有一个工作演示：开始和结束都记录到上面的控制台。