本篇文章主要探討jquery文件上傳組件WebUploader的使用方法和注意事項。有一定的參考價值，有需要的朋友可以參考一下，跟隨小編一起來看解決方法吧。

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質(zhì)，值得信賴！

 一、前言

公司網(wǎng)站社區(qū)有圖片上傳功能，由于網(wǎng)站已經(jīng)有些年頭了，當(dāng)時上傳的時候根據(jù)客戶端支不支持flash而分為兩種邏輯。如果支持flash就使用SWFuploader這個上傳組件進行文件上傳，這種用戶體驗較好。如果不支持flash則使用普通的input標(biāo)簽進行上傳，這種方式功能就不全，體驗不好。但是由于現(xiàn)在chrome瀏覽器默認(rèn)不支持flash，導(dǎo)致大部分時候用戶都使用input標(biāo)簽上傳，上傳體驗不好，所以決定使用百度的webuploader上傳組件來替換原有的上傳組件。在替換過程中發(fā)現(xiàn)一些問題，把需要注意的地方記錄下來。

二、WebUploader使用注意

其實第三方的js插件一般用法都差不多，基本都是導(dǎo)入資源文件、根據(jù)配置初始化插件對象、使用對象的方法或者監(jiān)聽事件完成特定的功能，webuploader也差不多。

JS導(dǎo)入資源文件

需要導(dǎo)入wepuploader的css文件、jquery.js以及webuploader.js文件。

css文件就是webuploader幫你生成的上傳按鈕的樣式文件，如果你對默認(rèn)的樣式不滿意，一是可以自行修改該css來達(dá)到你的要求。另一種方法就是準(zhǔn)備好自己的css文件，然后修改webuploader.js的源代碼，然后指定按鈕的class、mouseenter、mouseleave時的class等。webuploader.js代碼位置如下：

button.addClass('webuploader-pick');
                //button.addClass('btn');
                //button.addClass('btn-default');
    
                me.on( 'all', function( type ) {
                    var files;
    
                    switch ( type ) {
                        case 'mouseenter':
                            button.addClass('webuploader-pick-hover');
                            break;
    
                        case 'mouseleave':
                            button.removeClass('webuploader-pick-hover');
                            break;
    
                        case 'change':
                            files = me.exec('getFiles');
                            me.trigger( 'select', $.map( files, function( file ) {
                                file = new File( me.getRuid(), file );
    
                                // 記錄來源。
                                file._refer = opts.container;
                                return file;
                            }), opts.container );
                            break;
                    }
                })

由于webuploader是基于jquery的，所以需要導(dǎo)入jquery.js,并且jquery版本要大于1.10?？拥氖怯捎诰W(wǎng)站老舊，所以之前使用的是prototype.js來進行各種操作。為了將$使用權(quán)交給prototype，還要jQuery.noConflict()，當(dāng)然一般不需要這個操作啦。

這里我使用的webuploader.js的版本是0.1.2,之前我曾使用0.1.5 。但是0.1.5在進行flash上傳時，如果服務(wù)器端返回的不是一個json格式的字符串，webuploader.js代碼將會報錯,客戶端接收不到返回信息。而我們服務(wù)器返回的就是一個普通字符串，所以沒有辦法，只能使用0.1.2。

初始化webuploader對象

在初始化對象之前,因為上傳按鈕是webuploader自己幫你生成的，所以首先準(zhǔn)備上傳按鈕的父標(biāo)簽，webuploader將在該標(biāo)簽內(nèi)生成上傳標(biāo)簽，可以是div、span等等。我使用的就是span：

然后就可以初始化webuploader對象了，js代碼如下：

    var uploader = WebUploader.create({
        //是否允許重復(fù)的圖片
        duplicate: true,
        auto: false, // 選完文件后，是否自動上傳
        swf: '../JS/webuploader/Uploader.swf', // swf文件路徑
        server: "/upload.html", // 文件接收服務(wù)端
        pick: { id: "#uploadImage", innerHTML: "本地上傳圖片" }, // 選擇文件的按鈕?？蛇x
        // 只允許選擇圖片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        //線程數(shù)
        threads: 1,
        //單個文件大小限制
        fileSingleSizeLimit: 2000,
        //上傳文件數(shù)量限制
        fileNumLimit:10,
        //上傳前不壓縮
        compress:false,
    });

WebUploader.create()方法生成webuploader對象（貌似還有其他方法生成，不過這不是重點），傳入配置的對象就ok了

server屬性指定文件上傳的服務(wù)器地址。

pick屬性指定上傳按鈕，id通過jquery的選擇器指定哪個按鈕（不一定非要是#的id選擇器）

swf屬性指定啟用flash時到哪里加載swf文件（webuploader內(nèi)部兼容flash和h6，我們不需要關(guān)注它使用哪種方式）

auto 選完文件后，是否自動上傳，這里我沒用自動上傳，因為選完文件后我需要在UI上做一些操作，之后我會手動指定開始上傳。

配置需要注意的就是以上幾個屬性，其它的屬性還有很多，有一些已經(jīng)在上面的js里面注釋，另外沒有囊括的可以參考WebUploader官方文檔。

監(jiān)聽webuploader事件

進行以上配置之后你就可以在頁面上看到你的上傳按鈕了，但是上面的其實并不是重點。靈活使用webuploader的關(guān)鍵是對webuploader上傳圖片過程中觸發(fā)的一系列事件的處理，根據(jù)我們的業(yè)務(wù)要求我主要監(jiān)聽了以下的事件：

    //當(dāng)有一批文件加載進隊列時觸發(fā)事件
    uploader.on("filesQueued", webFilesQueued);
    //當(dāng)有一批文件加載進隊列時觸發(fā)事件
    //uploader.on("fileQueued", webFilesQueued);
    //單個文件開始上傳
    uploader.on("uploadStart", uploadStart);
    //單個文件上傳成功
    uploader.on("uploadSuccess", uploadSuccess);
    //單個文件上傳過程中
    uploader.on("uploadProgress", uploadProgress);
    //所有文件上傳結(jié)束
    uploader.on("uploadFinished", uploadComplete);
    //圖片校驗不通過時
    uploader.on("error", webFileQueueError);
    //上傳出錯時
    uploader.on("uploadError",webUploadError);

webuploader會將你通過文件對話框選擇的圖片（可以是一張，可以是多張圖片）加入到一個隊列中，然后將該隊列中所有的文件上傳（注意如果你配置的thread大于1的話webuploader是支持多線程上傳的）。

filesQueued 當(dāng)有一批文件加載進隊列時觸發(fā)的事件，此時文件還沒開始上傳。你可以執(zhí)行一些業(yè)務(wù)邏輯，比如我就需要判斷這次上傳了多少張圖片，然后在頁面上動態(tài)生成這么多圖片框。執(zhí)行完業(yè)務(wù)邏輯之后我需要手動指定開始上傳（因為我配置的是auto: false）執(zhí)行ploader.startUpload()（如果自動上傳就不需要手動執(zhí)行該方法），那么此時在隊列中的所有圖片就開始上傳了。

fileQueued 和filesQueued差不多，但是這是單個文件入隊時觸發(fā)的事件，一次選擇多個圖片時會多次觸發(fā)該事件。

uploadStart 單個文件開始上傳時觸發(fā)的事件。

uploadProgress 單個文件上傳過程中觸發(fā)的事件，在回調(diào)方法內(nèi)你可以接收到的上傳的百分比，利用這個百分比我們可以動態(tài)的顯示上傳進度條。

uploadSuccess 單個文件上傳成功觸發(fā)的事件，在回調(diào)方法內(nèi)你可以接收到服務(wù)器端返回的數(shù)據(jù)以及當(dāng)前是哪個file對象上傳成功，目測通過file對象可以獲取到圖片的縮略圖對象（webuploader前端幫我們生成的），可以在UI上顯示縮略圖等等邏輯（根據(jù)自己的業(yè)務(wù)要求決定。。。。）。

function uploadSuccess(file, serverData) {
    doSomeThing();
}

uploadFinished 隊列中所有文件上傳成功時觸發(fā)的事件，具體回調(diào)方法視業(yè)務(wù)邏輯決定。

error 圖片在加入隊列之前會進行校驗，看大小、格式等等是否滿足配置要求，校驗不通過觸發(fā)的事件，你可以在UI上彈窗提示用戶

uploadError 這里圖片校驗通過，加入了隊列，并且開始上傳到服務(wù)器，如果服務(wù)器或者網(wǎng)絡(luò)有問題導(dǎo)致出錯觸發(fā)的事件，可以提示用戶上傳不成功。

三、注意事項

按照以上方法應(yīng)該一般的上傳問題都可以解決，不過這次替換過程中還遇到一些問題，記錄如下：

上傳總數(shù)量限制

在前端我們有總數(shù)量的限制，但是配置時fileNumLimit：10屬性指的并不是總數(shù)量10張，而是該次對話框你選擇的文件數(shù)量，如果文件對話框內(nèi)你選了12張，那么webuploader也會上傳10張，但是后面的兩張會丟棄掉。如果想對總數(shù)量限制一種方法是修改webuploader.js的源碼：

 uploader.on( 'beforeFileQueued', function( file ) {
                //實時獲得上傳限制的文件總數(shù)
                max = this.options.fileNumLimit;
                if ( count >= max && flag ) {
                    flag = false;
                    this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
                    setTimeout(function() {
                        flag = true;
                    }, 1 );
                }
                return count >= max ? false : true;
            });
    
            uploader.on( 'fileQueued', function() {
                count++;
            });
    
            uploader.on( 'fileDequeued', function() {
                count--;
            });
    
            uploader.on( 'uploadFinished', function() {
                //count = 0; 限制總數(shù)量，而不是限制一次的文件數(shù)量
            });

數(shù)量校驗結(jié)束后count會清0，把這個注釋掉（上面js倒數(shù)第二行被注釋的代碼）那么fileNumLimit就是總數(shù)量了。

還有一種方法是webuploader會記錄上傳成功的文件數(shù)，自己拿到這個數(shù)來進行判斷就行了。

chrome瀏覽器不能連續(xù)選擇相同圖片

連續(xù)上傳同一圖片時在chrome瀏覽器上總是不觸發(fā)入隊的事件，剛開始以為是配置的duplicate屬性是false，后來發(fā)現(xiàn)duplicate屬性是正確的true。這是chrome的特性，選擇文件對話框關(guān)閉的時候會將input標(biāo)簽的value屬性設(shè)置為這張圖片的hash值？，如果input已經(jīng)有了value屬性（上一張圖片的），并且和這一張的相同，那么將不觸發(fā)change事件，也就是不上傳了。解決方法：

function uploadComplete(file) {
        //解決chrome瀏覽器不能連續(xù)兩次上傳相同圖片的bug k----------
        if ($("uploadImageDiv").select("input").length > 0) {
            $("uploadImageDiv").select("input")[0].value = "";
        }
        //解決chrome瀏覽器不能連續(xù)兩次上傳相同圖片的bug k----------
}

監(jiān)聽上傳完成事件，把input標(biāo)簽的value設(shè)為空就行了。

以上就是jquery文件上傳組件WebUploader的使用方法和注意事項匯總，內(nèi)容較為全面，小編相信有部分知識點可能是我們?nèi)粘９ぷ骺赡軙姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。