建站
咨詢
售后
建站咨詢
新聞中心
本篇文章主要探討jquery文件上傳組件WebUploader的使用方法和注意事項(xiàng)。有一定的參考價(jià)值，有需要的朋友可以參考一下，跟隨小編一起來(lái)看解決方法吧。
創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十余年品質(zhì)，值得信賴！
一、前言
公司網(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上傳組件來(lái)替換原有的上傳組件。在替換過(guò)程中發(fā)現(xiàn)一些問(wèn)題，把需要注意的地方記錄下來(lái)。
二、WebUploader使用注意
其實(shí)第三方的js插件一般用法都差不多，基本都是導(dǎo)入資源文件、根據(jù)配置初始化插件對(duì)象、使用對(duì)象的方法或者監(jiān)聽(tīng)事件完成特定的功能，webuploader也差不多。
JS導(dǎo)入資源文件
需要導(dǎo)入wepuploader的css文件、jquery.js以及webuploader.js文件。
css文件就是webuploader幫你生成的上傳按鈕的樣式文件，如果你對(duì)默認(rèn)的樣式不滿意，一是可以自行修改該css來(lái)達(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 );
// 記錄來(lái)源。
file._refer = opts.container;
return file;
}), opts.container );
break;
}
})由于webuploader是基于jquery的，所以需要導(dǎo)入jquery.js,并且jquery版本要大于1.10。坑爹的是由于網(wǎng)站老舊，所以之前使用的是prototype.js來(lái)進(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è)普通字符串，所以沒(méi)有辦法，只能使用0.1.2。
初始化webuploader對(duì)象
在初始化對(duì)象之前,因?yàn)樯蟼靼粹o是webuploader自己幫你生成的，所以首先準(zhǔn)備上傳按鈕的父標(biāo)簽，webuploader將在該標(biāo)簽內(nèi)生成上傳標(biāo)簽，可以是div、span等等。我使用的就是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ì)象（貌似還有其他方法生成，不過(guò)這不是重點(diǎn)），傳入配置的對(duì)象就ok了
server屬性指定文件上傳的服務(wù)器地址。
pick屬性指定上傳按鈕，id通過(guò)jquery的選擇器指定哪個(gè)按鈕（不一定非要是#的id選擇器）
swf屬性指定啟用flash時(shí)到哪里加載swf文件（webuploader內(nèi)部兼容flash和h6，我們不需要關(guān)注它使用哪種方式）
auto 選完文件后，是否自動(dòng)上傳，這里我沒(méi)用自動(dòng)上傳，因?yàn)檫x完文件后我需要在UI上做一些操作，之后我會(huì)手動(dòng)指定開(kāi)始上傳。
配置需要注意的就是以上幾個(gè)屬性，其它的屬性還有很多，有一些已經(jīng)在上面的js里面注釋，另外沒(méi)有囊括的可以參考WebUploader官方文檔。
監(jiān)聽(tīng)webuploader事件
進(jìn)行以上配置之后你就可以在頁(yè)面上看到你的上傳按鈕了，但是上面的其實(shí)并不是重點(diǎn)。靈活使用webuploader的關(guān)鍵是對(duì)webuploader上傳圖片過(guò)程中觸發(fā)的一系列事件的處理，根據(jù)我們的業(yè)務(wù)要求我主要監(jiān)聽(tīng)了以下的事件：
//當(dāng)有一批文件加載進(jìn)隊(duì)列時(shí)觸發(fā)事件
uploader.on("filesQueued", webFilesQueued);
//當(dāng)有一批文件加載進(jìn)隊(duì)列時(shí)觸發(fā)事件
//uploader.on("fileQueued", webFilesQueued);
//單個(gè)文件開(kāi)始上傳
uploader.on("uploadStart", uploadStart);
//單個(gè)文件上傳成功
uploader.on("uploadSuccess", uploadSuccess);
//單個(gè)文件上傳過(guò)程中
uploader.on("uploadProgress", uploadProgress);
//所有文件上傳結(jié)束
uploader.on("uploadFinished", uploadComplete);
//圖片校驗(yàn)不通過(guò)時(shí)
uploader.on("error", webFileQueueError);
//上傳出錯(cuò)時(shí)
uploader.on("uploadError",webUploadError);webuploader會(huì)將你通過(guò)文件對(duì)話框選擇的圖片（可以是一張，可以是多張圖片）加入到一個(gè)隊(duì)列中，然后將該隊(duì)列中所有的文件上傳（注意如果你配置的thread大于1的話webuploader是支持多線程上傳的）。
filesQueued 當(dāng)有一批文件加載進(jìn)隊(duì)列時(shí)觸發(fā)的事件，此時(shí)文件還沒(méi)開(kāi)始上傳。你可以執(zhí)行一些業(yè)務(wù)邏輯，比如我就需要判斷這次上傳了多少?gòu)垐D片，然后在頁(yè)面上動(dòng)態(tài)生成這么多圖片框。執(zhí)行完業(yè)務(wù)邏輯之后我需要手動(dòng)指定開(kāi)始上傳（因?yàn)槲遗渲玫氖莂uto: false）執(zhí)行ploader.startUpload()（如果自動(dòng)上傳就不需要手動(dòng)執(zhí)行該方法），那么此時(shí)在隊(duì)列中的所有圖片就開(kāi)始上傳了。
fileQueued 和filesQueued差不多，但是這是單個(gè)文件入隊(duì)時(shí)觸發(fā)的事件，一次選擇多個(gè)圖片時(shí)會(huì)多次觸發(fā)該事件。
uploadStart 單個(gè)文件開(kāi)始上傳時(shí)觸發(fā)的事件。
uploadProgress 單個(gè)文件上傳過(guò)程中觸發(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è)通過(guò)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)不通過(guò)觸發(fā)的事件，你可以在UI上彈窗提示用戶
uploadError 這里圖片校驗(yàn)通過(guò)，加入了隊(duì)列，并且開(kāi)始上傳到服務(wù)器，如果服務(wù)器或者網(wǎng)絡(luò)有問(wèn)題導(dǎo)致出錯(cuò)觸發(fā)的事件，可以提示用戶上傳不成功。
三、注意事項(xiàng)
按照以上方法應(yīng)該一般的上傳問(wèn)題都可以解決，不過(guò)這次替換過(guò)程中還遇到一些問(wèn)題，記錄如下：
上傳總數(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ù)來(lái)進(jìn)行判斷就行了。
chrome瀏覽器不能連續(xù)選擇相同圖片
連續(xù)上傳同一圖片時(shí)在chrome瀏覽器上總是不觸發(fā)入隊(duì)的事件，剛開(kāi)始以為是配置的duplicate屬性是false，后來(lái)發(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)聽(tīng)上傳完成事件，把input標(biāo)簽的value設(shè)為空就行了。
以上就是jquery文件上傳組件WebUploader的使用方法和注意事項(xiàng)匯總，內(nèi)容較為全面，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ骺赡軙?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。
當(dāng)前文章：jquery文件上傳組件WebUploader的使用方法和注意事項(xiàng)
轉(zhuǎn)載源于：http://ef60e0e.cn/article/poggsd.html
