Bootstrap模態框使用WebUploader點擊失效問題解決

解決

方法一

在上傳按鈕上監聽一個點擊事件，如create()，在該函數中重新生成上傳按鈕

function create(){
     uploader.addButton({
     id: '#filePicker',
     innerHTML: '上傳'
     });
}

　　通過該函數，每次點擊上傳時重新生成上傳按鈕，這種方式的弊端是，第一次點擊上傳按鈕總是沒反應的，之后再次點擊才能彈出文件選擇框

方法二

在模態框彈出后再初始化webuploader

var uploader;
//在點擊彈出模態框的時候再初始化WebUploader，解決點擊上傳無反應問題
$("#myModal").on("shown.bs.modal",function(){
    uploader = WebUploader.create({
        swf : '/web/public/Uploader.swf',
        server : $("#jumicontextPath").val()+'/common/file/upload',// 后台路徑
        pick : '#filePicker', // 選擇文件的按鈕。可選。內部根據當前運行是創建，可能是input元素，也可能是flash.
        resize : false,// 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！
        chunked : true, // 是否分片
        duplicate:true,//去重， 根據文件名字、文件大小和最后修改時間來生成hash Key.
        chunkSize : 52428 * 100, // 分片大小， 5M
        /*    fileSingleSizeLimit:100*1024,//文件大小限制*/
        auto : true,
        // 只允許選擇圖片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        }
    });

    // 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
    uploader.on('uploadSuccess', function (file,response) {
        var fileUrl = response.data.fileUrl;
        //TODO
        $("#responeseText").text("上傳成功,文件名："+response.data.fileName);
    });

    // 當文件上傳出錯時觸發
    uploader.on('uploadError', function (file) {
        $("#responeseText").text("上傳失敗");
    });

    //當validate不通過時觸發
    uploader.on('error', function (type) {
        if(type=="F_EXCEED_SIZE"){
            alert("文件大小不能超過xxx KB!");
        }
    });
});

　　單單這樣也會有問題，這樣每次彈出模態框之后都加載一個邊框，使按鈕越來越大，所以需要在關閉模態框后銷毀webuploader

//關閉模態框銷毀WebUploader，解決再次打開模態框時按鈕越變越大問題
$('#myModal').on('hide.bs.modal', function () {
    $("#responeseText").text("");
    uploader.destroy();
});

　　程序員的基礎教程：菜鳥程序員