1. 程式人生 > >webUploader選擇檔案按鈕無效

webUploader選擇檔案按鈕無效

在使用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() 重新例項化一下元件,即可解決。