爲什麼Blueimp的jQuery-File-Upload插件不會觸發回調？

Question

我正在試驗Blueimp's jQuery-File-Upload插件，這個插件看起來非常有前途，由demo來看。

這真的很容易實現：

var $uploadButton = $("#fileop-upload");// <input type="file" id="fileop-upload" [etc] /> 
$uploadButton.fileupload({ 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

選定的文件，但是沒有如預期刷新頁面上傳的罰款，但當然以這樣的最小配置的用戶將不會得到任何通知。這裏插件的回調會派上用場。

根據文檔有兩種方法來定義回調。例如可在原始配置對象被加入這樣的add事件（每當被選擇用於上載文件的時候觸發）：

$uploadButton.fileupload({ 
    add : addFileListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

或者：

$uploadButton.bind("fileuploadadd", addFileListener); 

但是我發現只有第一種方法有效，第二種方法沒有做任何事情。

它是更奇怪的是，沒有其他的回調 - 尤其是progress和start - 似乎事宜中不費一槍我如何將它們綁定：

$uploadButton.fileupload({ 
    add : addFileListener, 
    progress : progressListener, 
    start : startListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 

或

$uploadButton.fileupload({ 
    add : addFileListener, 
    url : "//domain/path/to/receive-uploaded-files" 
}); 
$uploadButton.bind("fileuploadprogress", progressListener"); 
$uploadButton.bind("fileuploadstart", startListener"); 

我有引用的偵聽器函數定義，並且代碼不報告任何錯誤或警告。

.bind方法失敗，爲什麼progress或start聽衆沒有激活？

Answer 1

我是jQuery File Upload插件的作者。

我沒有解釋爲什麼第三個示例代碼中的fileuploadadd事件不會觸發。 但是，如果您重寫add callback選項，則必須確保通過調用數據參數的submit方法來啓動文件上載，如添加回調的Options documentation中所述（也記錄在插入）。

例如下面的代碼應該打印出不同的回調事件：

$('#fileupload').fileupload({ 
    add: function (e, data) { 
     console.log('add'); 
     data.submit(); 
    }, 
    progress: function (e, data) { 
     console.log('progress'); 
    }, 
    start: function (e) { 
     console.log('start'); 
    } 
}).bind('fileuploadadd', function (e, data) { 
    console.log('fileuploadadd'); 
}).bind('fileuploadprogress', function (e, data) { 
    console.log('fileuploadprogress'); 
}).bind('fileuploadstart', function (e) { 
    console.log('fileuploadstart'); 
}); 

還要注意的是，插件是模塊化的，UI版本（下載示例中使用）利用了其將與上面的代碼重寫回調選項。 這就是事件綁定非常有用的原因，因爲它允許定義其他回調方法而不會覆蓋通過選項對象設置的回調。

Answer 2

不知道這樣能否解決您的問題或沒有，但對我來說，以下不工作（每文檔應該工作：

$uploadButton.bind 'fileuploadchange', (e, data) => 
    # Do something 

但是，下面的工作：

$uploadButton.bind 'change', (e, data) => 
    # Do something 

Answer 3

這並沒有爲我工作。

$('#fileupload').fileupload({url: '/url/to/server/'}); 

$('#fileupload').bind('fileuploaddone', function (e, data) { 
    console.log('success!!!'); 

    console.log(e); 

    console.log(data); 

}); 

但這絲毫！

$('#fileupload').fileupload({url: '/url/to/server/'}).bind('fileuploaddone', function (e, data) { 
    console.log('success!!!'); 

    console.log(e); 

    console.log(data); 

}); 

我的第一個猜測是，在第一種情況下，你將事件綁定到實際的表單輸入，而不是fileupload對象，第二，通過使用鏈接你實際上使用fileupload對象，我猜文檔是模糊的，因爲它讀取：

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */}); 

它應該閱讀

$('#fileupload').fileupload().bind('fileuploadadd', function (e, data) {/* ... */}); 

Answer 4

相反的，

$('#fileupload').bind('fileuploadadd', function (e, data) {/*...*/}); 

我用，

$('#fileupload').bind('fileuploadchange', function (e, data) {/*...*/}); 

，它爲我工作。

Answer 5

如果定義了add事件，則所有進程回調都不會觸發。

$(function(){ 
    var fileupload=$('#fileupload').fileupload({ 
     url: 'fileupload.php', 
     dataType: 'json', 
     add: function(e, data) { 
      data.submit(); 
     }, 
    }) 
    .on('fileuploadprocessalways', function (e, data) { 
     //Won't be triggered if add callback is defined 
    }) 
});