當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

webuploader常用知识及方法、网站

發(fā)布時(shí)間：2023/12/4 综合教程 30 生活家

生活随笔收集整理的這篇文章主要介紹了 webuploader常用知识及方法、网站小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

//一個(gè)div用來(lái)存放文件上傳時(shí)的信息??
//一個(gè)div用來(lái)存放上傳相關(guān)的按鈕??
<link?rel="stylesheet"?type="text/css"?href="./web-uploader/webuploader.css"?/>??
??
<script?type="text/javascript"?src="./web-uploader/webuploader.js"></script>??
<div?id="uploader"?class="wu-example">??
??????
????<div?id="thelist"?class="uploader-list"></div>??
????<div?class="btns">??
????????<div?id="picker">選擇文件</div>??
????????<button?id="ctlBtn"?class="btn?btn-default">開始上傳</button>??
????????<button?id="goBack"?class="btn?btn-default">返回</button>??
????</div>??
</div>??
/*??
1、首先用WebUploader.create創(chuàng)建一個(gè)?WebUploader對(duì)象?，并在create中添加自定義配置項(xiàng)??
2、然后手動(dòng)給WebUploader對(duì)象添加事件，用到的基本事件是???
fileQueued?文件被添加進(jìn)隊(duì)列的時(shí)候，在thelist?div?中顯示文件信息??
uploadProgress?文件上傳過程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示??
uploadSuccess??
uploadError???
uploadComplete?在文件上傳完后都會(huì)觸發(fā)uploadComplete事件??
3、最后?調(diào)用upload()方法實(shí)現(xiàn)上傳，??
*/??
<script>??
var?uploader?=?WebUploader.create({??
??
????//?swf文件路徑??
????swf:??'/js/Uploader.swf',??
????formData:{"dn":$("#requestDn").val()},//參數(shù)列表??
????//?文件接收服務(wù)端。??
????server:?'/tp5/index/user/uploadFile',??
????//?選擇文件的按鈕。可選。??
????//?內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.??
????pick:?'#picker',??
????//?不壓縮image,?默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！??
????resize:?false,??
????//?只允許選擇圖片文件。??
????accept:?{??
????????title:?'file',??
????????extensions:?'cer'??
//????????????????mimeTypes:?'.cer,'??
????}??
});??
var?$list?=?$("#thelist");??
uploader.on(?'fileQueued',?function(?file?)?{??
????$list.append(?'<div?id="'?+?file.id?+?'"?class="item">'?+??
????????????'<h4?class="info">'?+?file.name?+?'</h4>'?+??
????????????'<p?class="state">等待上傳...</p>'?+??
????????????'<p?class="progress?progress-bar">上傳進(jìn)度...</p>'?+??
????????????'</div>'?);??
});??
??
uploader.on(?'uploadSuccess',?function(?file?)?{??
????$(?'#'+file.id?).find('p.state').text('已上傳');??
});??
//?文件上傳過程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。??
uploader.on(?'uploadProgress',?function(?file,?percentage?)?{??
????var?$li?=?$(?'#'+file.id?),??
????????????$percent?=?$li.find('.progress?.progress-bar');??
??
????//?避免重復(fù)創(chuàng)建??
????if?(?!$percent.length?)?{??
????????$percent?=?$('<div?class="progress?progress-striped?active">'?+??
????????????????'<div?class="progress-bar"?role="progressbar"?style="width:?0%">'?+??
????????????????'</div>'?+??
????????????????'</div>').appendTo(?$li?).find('.progress-bar');??
????}??
??
????$li.find('p.state').text('上傳中');??
??
????$percent.css(?'width',?percentage?*?100?+?'%'?);??
});??
uploader.on(?'uploadError',?function(?file?)?{??
????$(?'#'+file.id?).find('p.state').text('上傳出錯(cuò)');??
});??
??
uploader.on(?'uploadComplete',?function(?file?)?{??
????$(?'#'+file.id?).find('.progress').fadeOut();??
});??
??
$("#ctlBtn").on('click',?function()?{??
????uploader.upload();??
});??
$("#goBack").on('click',?function()?{??
????$("#uploadFileDiv").empty();??
????$("#uploadFile").removeClass("hidden");??
});??
</script>??

2、接口說(shuō)明?
這里是簡(jiǎn)單介紹，具體接口參考??webuploader接口文檔地址
Web Uploader內(nèi)部類的詳細(xì)說(shuō)明，以下提及的功能類，都可以在 WebUploader 這個(gè)變量中訪問到。
也就是說(shuō)下面提到的 Base類、Mediator類、file類、Queue類都可以直接用 WebUploader 創(chuàng)建的變量直接訪問，
例如下面創(chuàng)建的 uploader 變量，就可以直接訪問 Base類的 uploader.browser.ie
//Demo中使用的是WebUploader.create方法來(lái)初始化的，實(shí)際上可直接訪問WebUploader.Uploader

2.1、Uploader類上傳入口類
2.1.1、參數(shù)說(shuō)明，下面所有參數(shù)都是可選的，并且都有默認(rèn)值

var?uploader?=?WebUploader.Uploader({?????
????//幾個(gè)常用的參數(shù)：swf,pick,formData,runtimeOrder??
??????
????//所有參數(shù)列表??
????swf:?'path_of_swf/Uploader.swf',??
????dnd:?'#dndArea',?//?[默認(rèn)值：undefined]?指定Drag?And?Drop拖拽的容器，如果不指定，則不啟動(dòng)。??
????disableGlobalDnd:?true,,?//?[默認(rèn)值：false]?是否禁掉整個(gè)頁(yè)面的拖拽功能，如果不禁用，圖片拖進(jìn)來(lái)的時(shí)候會(huì)默認(rèn)被瀏覽器打開??
????paste:?'#uploader',?//?[默認(rèn)值：undefined]?指定監(jiān)聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來(lái)添加截屏的圖片。建議設(shè)置為document.body.??
????pick:'#filePicker',//也可以用下面的方式詳細(xì)配置??
????//?{Selector,?Object}??[默認(rèn)值：undefined]?指定選擇文件的按鈕容器，不指定則不創(chuàng)建按鈕。??
????pick:?{??
????????id:?'#filePicker',//Seletor|dom?指定選擇文件的按鈕容器，不指定則不創(chuàng)建按鈕。注意?這里雖然寫的是?id,?但是不是只支持?id,?還支持?class,?或者?dom?節(jié)點(diǎn)。??
????????label:?'點(diǎn)擊選擇圖片',//請(qǐng)采用?innerHTML?代替??
????????innerHTML:?"點(diǎn)擊選擇圖片",//?指定按鈕文字。不指定時(shí)優(yōu)先從指定的容器中看是否自帶文字。??
????????multiple:true?//是否開起同時(shí)選擇多個(gè)文件能力。??
????},??
????//限制上傳的文件類型??
????accept:?{??
????????title:?'Images',//?{String}?文字描述??
????????extensions:?'gif,jpg,jpeg,bmp,png,rar',//?{String}?允許的文件后綴，不帶點(diǎn)，多個(gè)用逗號(hào)分割。??
????????mimeTypes:?'image/gif，image/jpg，image/jpeg，image/bmp，image/png，.rar'//?多個(gè)用逗號(hào)分割。??
????},??
????//?設(shè)置縮略圖。??
????thumb:?{??
????????width:?110,??
????????height:?110,??
????????//?圖片質(zhì)量，只有type為`image/jpeg`的時(shí)候才有效。??
????????quality:?70,??
????????//?是否允許放大，如果想要生成小圖的時(shí)候不失真，此選項(xiàng)應(yīng)該設(shè)置為false.??
????????allowMagnify:?true,??
????????//?是否允許裁剪。是否采用裁剪模式。如果采用這樣可以避免空白內(nèi)容。??
????????crop:?true,??
????????//?為空的話則保留原有圖片格式。??
????????//?否則強(qiáng)制轉(zhuǎn)換成指定的類型。??
????????type:?'image/jpeg'??
????},??
????//?配置壓縮的圖片的選項(xiàng)。如果此選項(xiàng)為false,?則圖片在上傳前不進(jìn)行壓縮。??
????compress:?{??
????????width:?1600,??
????????height:?1600,??
????????//?圖片質(zhì)量，只有type為`image/jpeg`的時(shí)候才有效。??
????????quality:?90,??
????????//?是否允許放大，如果想要生成小圖的時(shí)候不失真，此選項(xiàng)應(yīng)該設(shè)置為false.??
????????allowMagnify:?false,??
????????//?是否允許裁剪。??
????????crop:?false,??
????????//?是否保留頭部meta信息。??
????????preserveHeaders:?true,??
????????//?如果發(fā)現(xiàn)壓縮后文件大小比原來(lái)還大，則使用原來(lái)圖片??
????????//?此屬性可能會(huì)影響圖片自動(dòng)糾正功能??
????????noCompressIfLarger:?false,??
????????//?單位字節(jié)，如果圖片大小小于此值，不會(huì)采用壓縮。??
????????compressSize:?0??
????},???
??
??
????auto:?true,?//?[默認(rèn)值：false]?設(shè)置為?true?后，不需要手動(dòng)調(diào)用上傳，有文件選擇即開始上傳。??
????runtimeOrder:?'flash',?//?[默認(rèn)值：html5,flash]?指定運(yùn)行時(shí)啟動(dòng)順序。默認(rèn)會(huì)想嘗試?html5?是否支持，如果支持則使用?html5,?否則則使用?flash.可以將此值設(shè)置成?flash，來(lái)強(qiáng)制使用?flash?運(yùn)行時(shí)。??
????prepareNextFile:false,?//?[默認(rèn)值：false]?是否允許在文件傳輸時(shí)提前把下一個(gè)文件準(zhǔn)備好。?對(duì)于一個(gè)文件的準(zhǔn)備工作比較耗時(shí)，比如圖片壓縮，md5序列化。?如果能提前在當(dāng)前文件傳輸期處理，可以節(jié)省總體耗時(shí)。??
????chunked:false,?//?[默認(rèn)值：false]?是否要分片處理大文件上傳。??
????chunkSize:?512?*?1024,//?[默認(rèn)值：5242880]?如果要分片，分多大一片？?默認(rèn)大小為5M.??
????chunkRetry:2,?//?[默認(rèn)值：2]?如果某個(gè)分片由于網(wǎng)絡(luò)問題出錯(cuò)，允許自動(dòng)重傳多少次？??
????threads:3,?//?[默認(rèn)值：3]?上傳并發(fā)數(shù)。允許同時(shí)最大上傳進(jìn)程數(shù)。??
????formData:?{"data":"value","data":"value"},?//?[默認(rèn)值：{}]?文件上傳請(qǐng)求的參數(shù)表，每次發(fā)送都會(huì)發(fā)送此對(duì)象中的參數(shù)。??
????fileVal:"file",?//?[默認(rèn)值：'file']?設(shè)置文件上傳域的name。??
????method?:"POST",?//?[默認(rèn)值：'POST']?文件上傳方式，POST或者GET。??
????sendAsBinary?:false,?//?[默認(rèn)值：false]?是否已二進(jìn)制的流的方式發(fā)送文件，這樣整個(gè)上傳內(nèi)容php://input都為文件內(nèi)容，?其他參數(shù)在$_GET數(shù)組中。??
????fileNumLimit?:10,?//?[默認(rèn)值：undefined]?驗(yàn)證文件總數(shù)量,?超出則不允許加入隊(duì)列。??
????fileSizeLimit?:?200?*?1024?*?1024,????//?200?M??[默認(rèn)值：undefined]?驗(yàn)證文件總大小是否超出限制,?超出則不允許加入隊(duì)列。??
????fileSingleSizeLimit:?50?*?1024?*?1024,????//?50?M?[默認(rèn)值：undefined]?驗(yàn)證單個(gè)文件大小是否超出限制,?超出則不允許加入隊(duì)列。??
????duplicate?:true,?//?[默認(rèn)值：undefined]?去重，?根據(jù)文件名字、文件大小和最后修改時(shí)間來(lái)生成hash?Key.??
????disableWidgets:?{String,?Array},?//?[默認(rèn)值：undefined]?默認(rèn)所有?Uploader.register?了的?widget?都會(huì)被加載，如果禁用某一部分，請(qǐng)通過此?option?指定黑名單。??
});??

2.1.2、uploader對(duì)象的選項(xiàng)

1、option()?獲取或者設(shè)置Uploader配置項(xiàng)。??
//?修改后圖片上傳前，嘗試將圖片壓縮到1600?*?1600??
uploader.option(?'compress',?{??
????width:?1600,??
????height:?1600??
});???
2、getStats()?獲取文件統(tǒng)計(jì)信息。返回一個(gè)包含一下信息的對(duì)象。??
//successNum?上傳成功的文件數(shù)??
//progressNum?上傳中的文件數(shù)??
//cancelNum?被刪除的文件數(shù)??
//invalidNum?無(wú)效的文件數(shù)??
//uploadFailNum?上傳失敗的文件數(shù)??
//queueNum?還在隊(duì)列中的文件數(shù)??
//interruptNum?被暫停的文件數(shù)??
stats?=?uploader.getStats();??
if?(?stats.successNum?&&?!stats.uploadFailNum?)?{??
????setState(?'finish'?);??
????return;??
}??
3、destroy()?銷毀?webuploader?實(shí)例??
4、addButton()?添加文件選擇按鈕，如果一個(gè)按鈕不夠，需要調(diào)用此方法來(lái)添加。參數(shù)跟options.pick一致。??
????uploader.addButton({??
????????id:?'#filePicker2',??
????????label:?'繼續(xù)添加'??
????});??
5、makeThumb()?生成縮略圖，此過程為異步，所以需要傳入callback。?通常情況在圖片加入隊(duì)里后調(diào)用此方法來(lái)生成預(yù)覽圖以增強(qiáng)交互效果。??
????????????當(dāng)?width?或者?height?的值介于?0?-?1?時(shí)，被當(dāng)成百分比使用。??
????????????callback中可以接收到兩個(gè)參數(shù)。??
????????????第一個(gè)為error，如果生成縮略圖有錯(cuò)誤，此error將為真。??
????????????第二個(gè)為ret,?縮略圖的Data?URL值。??
????????????注意?Date?URL在IE6/7中不支持，所以不用調(diào)用此方法了，直接顯示一張暫不支持預(yù)覽圖片好了。?也可以借助服務(wù)端，將?base64?數(shù)據(jù)傳給服務(wù)端，生成一個(gè)臨時(shí)文件供預(yù)覽。??
????uploader.makeThumb(?file,?function(?error,?src?)?{??
????var?img;??
??
????if?(?error?)?{??
????????$wrap.text(?'不能預(yù)覽'?);??
????????return;??
????}??
??
????if(?isSupportBase64?)?{??
????????img?=?$('<img?src="'+src+'">');??
????????$wrap.empty().append(?img?);??
????}?else?{??
????????$.ajax('../../server/preview.php',?{??
????????????method:?'POST',??
????????????data:?src,??
????????????dataType:'json'??
????????}).done(function(?response?)?{??
????????????if?(response.result)?{??
????????????????img?=?$('<img?src="'+response.result+'">');??
????????????????$wrap.empty().append(?img?);??
????????????}?else?{??
????????????????$wrap.text("預(yù)覽出錯(cuò)");??
????????????}??
????????});??
????}??
},?thumbnailWidth,?thumbnailHeight?);??
??
6、md5File()?計(jì)算文件?md5?值，返回一個(gè)?promise?對(duì)象，可以監(jiān)聽?progress?進(jìn)度。??
7、addFiles()??添加文件到隊(duì)列??
8、removeFile()??移除某一文件,?默認(rèn)只會(huì)標(biāo)記文件狀態(tài)為已取消，如果第二個(gè)參數(shù)為?true?則會(huì)從?queue?中移除??
9、getFiles()??返回指定狀態(tài)的文件集合，不傳參數(shù)將返回所有狀態(tài)的文件。??
10、retry()?重試上傳，重試指定文件，或者從出錯(cuò)的文件開始重新上傳。??
11、sort()?排序隊(duì)列中的文件，在上傳之前調(diào)整可以控制上傳順序。??
12、reset()?重置uploader。目前只重置了隊(duì)列。??
13、predictRuntimeType()?預(yù)測(cè)Uploader將采用哪個(gè)Runtime??
14、upload()?開始上傳。此方法可以從初始狀態(tài)調(diào)用開始上傳流程，也可以從暫停狀態(tài)調(diào)用，繼續(xù)上傳流程。可以指定開始某一個(gè)文件??
15、stop()?暫停上傳。第一個(gè)參數(shù)為是否中斷上傳當(dāng)前正在上傳的文件。如果第一個(gè)參數(shù)是文件，則只暫停指定文件。??
16、cancelFile()?標(biāo)記文件狀態(tài)為已取消,?同時(shí)將中斷文件傳輸。??
17、isInProgress()?判斷Uplaoder是否正在上傳中。??
18、skipFile()?掉過一個(gè)文件上傳，直接標(biāo)記指定文件為已上傳狀態(tài)。??
19、request()?發(fā)送命令。當(dāng)傳入callback或者h(yuǎn)andler中返回promise時(shí)。返回一個(gè)當(dāng)所有handler中的promise都完成后完成的新promise。??
??
20、Uploader.register()?添加組件??
21、Uploader.unRegister()?刪除插件，只有在注冊(cè)時(shí)指定了名字的才能被刪除。??

2.1.3、事件說(shuō)明

dndAccept?://?阻止,此事件可以拒絕某些類型的文件拖入進(jìn)來(lái)。目前只有?chrome?提供這樣的?API，且只能通過?mime-type?驗(yàn)證。??
beforeFileQueued?://?當(dāng)文件被加入隊(duì)列之前觸發(fā)，此事件的handler返回值為false，則此文件不會(huì)被添加進(jìn)入隊(duì)列。??
fileQueued?://?當(dāng)文件被加入隊(duì)列以后觸發(fā)。??
filesQueued?://?當(dāng)一批文件添加進(jìn)隊(duì)列以后觸發(fā)。??
fileDequeued?://?當(dāng)文件被移除隊(duì)列后觸發(fā)。??
reset?://?當(dāng)?uploader?被重置的時(shí)候觸發(fā)。??
startUpload?://?當(dāng)開始上傳流程時(shí)觸發(fā)。??
stopUpload?://?當(dāng)開始上傳流程暫停時(shí)觸發(fā)。??
uploadFinished?://?當(dāng)所有文件上傳結(jié)束時(shí)觸發(fā)。??
uploadStart?://?某個(gè)文件開始上傳前觸發(fā)，一個(gè)文件只會(huì)觸發(fā)一次。??
uploadBeforeSend?://?當(dāng)某個(gè)文件的分塊在發(fā)送前觸發(fā)，主要用來(lái)詢問是否要添加附帶參數(shù)，大文件在開起分片上傳的前提下此事件可能會(huì)觸發(fā)多次。??
uploadAccept?://?當(dāng)某個(gè)文件上傳到服務(wù)端響應(yīng)后，會(huì)派送此事件來(lái)詢問服務(wù)端響應(yīng)是否有效。如果此事件handler返回值為false,?則此文件將派送server類型的uploadError事件。??
uploadProgress?://?上傳過程中觸發(fā)，攜帶上傳進(jìn)度。??
uploadError?://?當(dāng)文件上傳出錯(cuò)時(shí)觸發(fā)。??
uploadSuccess?://?當(dāng)文件上傳成功時(shí)觸發(fā)。??
uploadComplete?://?不管成功或者失敗，文件上傳完成時(shí)觸發(fā)。??
error?://?當(dāng)validate不通過時(shí)，會(huì)以派送錯(cuò)誤事件的形式通知調(diào)用者。通過upload.on('error',?handler)可以捕獲到此類錯(cuò)誤，目前有以下錯(cuò)誤會(huì)在特定的情況下派送錯(cuò)來(lái)。??
????????//Q_EXCEED_NUM_LIMIT?在設(shè)置了fileNumLimit且嘗試給uploader添加的文件數(shù)量超出這個(gè)值時(shí)派送。??
????????//Q_EXCEED_SIZE_LIMIT?在設(shè)置了Q_EXCEED_SIZE_LIMIT且嘗試給uploader添加的文件總大小超出這個(gè)值時(shí)派送。??
????????//Q_TYPE_DENIED?當(dāng)文件類型不滿足時(shí)觸發(fā)。。??
/*Web?Uploader內(nèi)部類的詳細(xì)說(shuō)明，以下提及的功能類，都可以在`WebUploader`這個(gè)變量中訪問到。?即?Base類?Mediator類??File類都可以在`WebUploader`這個(gè)變量中訪問到*/??

2.2、Base類基礎(chǔ)類方法 WebUploader 基礎(chǔ)類，提供一些簡(jiǎn)單常用的方法 ?WebUploader.browser.ie

1、create()?創(chuàng)建Uploader實(shí)例，等同于new?Uploader(?opts?);??
2、version?當(dāng)前版本號(hào)??
3、$?引用依賴的jQuery或者Zepto對(duì)象??
4、browser??簡(jiǎn)單的瀏覽器檢查結(jié)果??
5、os??android、ios??
6、inherits?實(shí)現(xiàn)類與類之間的繼承??
7、noop??一個(gè)不做任何事情的方法。可以用來(lái)賦值給默認(rèn)的callback??
8、bindFn?返回一個(gè)新的方法，此方法將已指定的context來(lái)執(zhí)行??
9、log?引用Console.log如果存在的話，否則引用一個(gè)空函數(shù)noop。??
10、slice?被uncurrythis的數(shù)組slice方法。?將用來(lái)將非數(shù)組對(duì)象轉(zhuǎn)化成數(shù)組對(duì)象??
11、guid?生成唯一的ID??
12、formatSize?格式化文件大小,?輸出成帶單位的字符串??
13、Deferred?創(chuàng)建一個(gè)Deferred對(duì)象。?詳細(xì)的Deferred用法說(shuō)明，請(qǐng)參照jQuery的API文檔。Deferred對(duì)象在鉤子回掉函數(shù)中經(jīng)常要用到，用來(lái)處理需要等待的異步操作。??
14、isPromise?判斷傳入的參數(shù)是否為一個(gè)?promise?對(duì)象。??
15、when?返回一個(gè)promise，此promise在所有傳入的promise都完成了后完成??

2.3、Mediator類事件處理類，可以獨(dú)立使用，也可以擴(kuò)展給對(duì)象使用中介，它本身是個(gè)單例，但可以通過installTo方法，使任何對(duì)象具備事件行為。主要目的是負(fù)責(zé)模塊與模塊之間的合作，降低耦合度

on?once?off?trigger?installTo??

2.4、File類文件類 ?本類的一般在 UploadProgress 這些事件中的回調(diào)函數(shù)中變量使用比較多

name//文件名，包括擴(kuò)展名（后綴）??
size//文件體積（字節(jié)）??
type//文件MIMETYPE類型，與文件類型的對(duì)應(yīng)關(guān)系請(qǐng)參考http://t.cn/z8ZnFny??
lastModifiedDate//文件最后修改日期??
id//文件ID，每個(gè)對(duì)象具有唯一ID，與文件名無(wú)關(guān)??
ext//文件擴(kuò)展名，通過文件名獲取，例如test.png的擴(kuò)展名為png??
statusText//狀態(tài)文字說(shuō)明。在不同的status語(yǔ)境下有不同的用途。??
setStatus//設(shè)置狀態(tài)，狀態(tài)變化時(shí)會(huì)觸發(fā)change事件。??
????setStatus(?status[,?statusText]?);//參數(shù):status?{File.Status,?String}文件狀態(tài)值??
????????statusText?//{String}?[可選]?[默認(rèn)值:?'']?狀態(tài)說(shuō)明，常在error時(shí)使用，用http,?abort,server等來(lái)標(biāo)記是由于什么原因?qū)е挛募e(cuò)誤。??
File.Status//文件狀態(tài)值，具體包括以下幾種類型：??
????inited?初始狀態(tài)??
????queued?已經(jīng)進(jìn)入隊(duì)列,?等待上傳??
????progress?上傳中??
????complete?上傳完成。??
????error?上傳出錯(cuò)，可重試??
????interrupt?上傳中斷，可續(xù)傳。??
????invalid?文件不合格，不能重試上傳。會(huì)自動(dòng)從隊(duì)列中移除。??
????cancelled?文件被移除。??

2.5、Queue 類文件隊(duì)列, 用來(lái)存儲(chǔ)各個(gè)狀態(tài)中的文件

stats//統(tǒng)計(jì)文件數(shù)。??
????numOfQueue?隊(duì)列中的文件數(shù)。??
????numOfSuccess?上傳成功的文件數(shù)??
????numOfCancel?被取消的文件數(shù)??
????numOfProgress?正在上傳中的文件數(shù)??
????numOfUploadFailed?上傳錯(cuò)誤的文件數(shù)。??
????numOfInvalid?無(wú)效的文件數(shù)。??
????numofDeleted?被移除的文件數(shù)。??
append//將新文件加入對(duì)隊(duì)列尾部??
prepend//將新文件加入對(duì)隊(duì)列頭部??
getFile//獲取文件對(duì)象??
fetch//從隊(duì)列中取出一個(gè)指定狀態(tài)的文件。??
sort//對(duì)隊(duì)列進(jìn)行排序，能夠控制文件上傳順序。??
getFiles//獲取指定類型的文件列表,?列表中每一個(gè)成員為File對(duì)象。??
removeFile//在隊(duì)列中刪除文件。??

github中的代碼給的例子基本上可以實(shí)現(xiàn)想要的功能，如果有別的需求可以結(jié)合代碼中的例子根據(jù)接口手冊(cè)進(jìn)行相應(yīng)的修改。

Web Uploader的所有代碼都在一個(gè)內(nèi)部閉包中，對(duì)外暴露了唯一的一個(gè)變量WebUploader，所以完全不用擔(dān)心此框架會(huì)與其他框架沖突。
Uploader實(shí)例具有Backbone同樣的事件API：on，off，once，trigger。
如同Document Element中的onEvent一樣，他的執(zhí)行比on添加的handler的要晚。如果那些handler里面，有一個(gè)return false了，此onEvent里面是不會(huì)執(zhí)行到的
uploader.on( 'fileQueued', function( file ) {
? ? // do some things.
});
//或
uploader.onFileQueued = function( file ) {
? ? // do some things.
};

總結(jié)

以上是生活随笔為你收集整理的webuploader常用知识及方法、网站的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： iso qemu 安装ubuntu_基于
下一篇：多队列部分队列没有包_记一次TCP全队