webUploader選擇檔案按鈕無效
阿新 • • 發佈:2018-12-14
在使用webUploader上傳檔案時,按官網案例寫完程式碼後,發現選擇完檔案後,再次點選選擇檔案按鈕沒反應,重新整理頁面後再點選又沒有問題了,控制檯也並沒有程式碼報錯,找了好久也沒有找到問題。
後來在文件中發現,這種現象可能是在選擇檔案之後,程式已經執行完畢。如果需要再次選擇檔案,需要元件重新渲染或者重新例項化uploader。
使用 uploader.refresh()
完美解決:
// 例項化
var uploader = WebUploader.create({
swf: BASE_URL + '/js/Uploader.swf', // swf檔案路徑
server: 'http://webuploader.duapp.com/server/fileupload.php', // 檔案接收服務端
pick: '#picker', // 選擇檔案的按鈕。可選。
});
// 當有檔案被新增進佇列的時候,如果需要再次選擇檔案,這裡需要重新例項化
uploader.on( 'fileQueued', function( file ) {
$list.append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上傳...</p>' +
'</div>' );
uploader.refresh(); // 重新例項化
});
還有一個情況,例如頁面有tab切換,切換到另一個tab頁後,選擇檔案可能也會失效。
解決辦法就是,點選tab切換時,執行 uploader.refresh()
重新例項化一下元件,即可解決。