jquery文件上傳組件WebUploader的使用方法和注意事項(xiàng)

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

 一、前言

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

二、WebUploader使用注意

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

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

<link href="../JS/webuploader/webuploader.css" rel="stylesheet" />
<script src="../JS/webuploader/jquery-1.12.4.min.js"></script>
<script src="../JS/webuploader/webuploader.js"></script>

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

css文件就是webuploader幫你生成的上傳按鈕的樣式文件，如果你對(duì)默認(rèn)的樣式不滿意，一是可以自行修改該css來達(dá)到你的要求。另一種方法就是準(zhǔn)備好自己的css文件，然后修改webuploader.js的源代碼，然后指定按鈕的class、mouseenter、mouseleave時(shí)的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ǎng)站老舊，所以之前使用的是prototype.js來進(jìn)行各種操作。為了將$使用權(quán)交給prototype，還要jQuery.noConflict()，當(dāng)然一般不需要這個(gè)操作啦。

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

初始化webuploader對(duì)象

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

<span id="uploadImage"></span>

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

    var uploader = WebUploader.create({
        //是否允許重復(fù)的圖片
        duplicate: true,
        auto: false, // 選完文件后，是否自動(dòng)上傳
        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,
        //單個(gè)文件大小限制
        fileSingleSizeLimit: 2000,
        //上傳文件數(shù)量限制
        fileNumLimit:10,
        //上傳前不壓縮
        compress:false,
    });

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

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

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

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

auto 選完文件后，是否自動(dòng)上傳，這里我沒用自動(dòng)上傳，因?yàn)檫x完文件后我需要在UI上做一些操作，之后我會(huì)手動(dòng)指定開始上傳。

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

監(jiān)聽webuploader事件

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

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

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

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

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

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

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

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

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

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

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

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

三、注意事項(xiàng)

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

上傳總數(shù)量限制

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

 uploader.on( 'beforeFileQueued', function( file ) {
                //實(shí)時(shí)獲得上傳限制的文件總數(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ù)量校驗(yàn)結(jié)束后count會(huì)清0，把這個(gè)注釋掉（上面js倒數(shù)第二行被注釋的代碼）那么fileNumLimit就是總數(shù)量了。

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

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

連續(xù)上傳同一圖片時(shí)在chrome瀏覽器上總是不觸發(fā)入隊(duì)的事件，剛開始以為是配置的duplicate屬性是false，后來發(fā)現(xiàn)duplicate屬性是正確的true。這是chrome的特性，選擇文件對(duì)話框關(guān)閉的時(shí)候會(huì)將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的使用方法和注意事項(xiàng)匯總，內(nèi)容較為全面，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ骺赡軙?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。