javascript - jqueryファイルアップロードのグローバル開始/終了イベント

Question

jQueryファイルのアップロード（APIオプション）のドキュメントを読んでいますが、「開始しています」および「完了しました」を意味するイベントは表示されません。開始と停止がありますが、実行されるファイルのアップロードごとに呼び出されます。

誰かが私が見ていなかったイベントを知っているか、グローバルな開始/停止操作をエミュレートする方法についての提案がありますか？

Answer 1

あなたが使用することができますprogressall：

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

Answer 2

実際には、それは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 3

グローバルな「開始」に最も近いのは、ドロップ/変更/貼り付けイベントを処理することです。

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

このハンドラーは1回だけ起動します。ユーザーがアップロードを開始した直後、ファイルキュー（またはリモートアップロード）の処理が開始される前。

クライアント側のファイル検証を行っていない場合、@ Kamelによる回答はグローバルな「end」に対して適切に機能します（ドキュメントが示唆しているように）。

クライアント側を検証する場合は、アップロードによってajaxアップロードがトリガーされない場合にも対処する必要があります。これを行うには、最初にアップロードされたファイルを記録し、すべてがクライアント側で拒否されるか、ajaxアップロード後に成功/失敗/中止されたときに「end」をトリガーします。

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にこれの動作デモがあります：開始と終了は上記のようにコンソールに記録されます。