webUploader選擇文件按鈕無效

在使用webUploader上傳文件時(shí),按官網(wǎng)案例寫完代碼后,發(fā)現(xiàn)選擇完文件后,再次點(diǎn)擊選擇文件按鈕沒反應(yīng),刷新頁面后再點(diǎn)擊又沒有問題了,控制臺也并沒有代碼報(bào)錯(cuò),找了好久也沒有找到問題。

后來在文檔中發(fā)現(xiàn),這種現(xiàn)象可能是在選擇文件之后,程序已經(jīng)執(zhí)行完畢。如果需要再次選擇文件,需要組件重新渲染或者重新實(shí)例化uploader。

使用 uploader.refresh() 完美解決:

// 實(shí)例化
var uploader = WebUploader.create({
    swf: BASE_URL + '/js/Uploader.swf',  // swf文件路徑
    server: 'http://webuploader.duapp.com/server/fileupload.php', // 文件接收服務(wù)端
    pick: '#picker',  // 選擇文件的按鈕??蛇x。
});

// 當(dāng)有文件被添加進(jìn)隊(duì)列的時(shí)候,如果需要再次選擇文件,這里需要重新實(shí)例化
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(); // 重新實(shí)例化
});

還有一個(gè)情況,例如頁面有tab切換,切換到另一個(gè)tab頁后,選擇文件可能也會失效。

解決辦法就是,點(diǎn)擊tab切換時(shí),執(zhí)行 uploader.refresh() 重新實(shí)例化一下組件,即可解決。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容