1. //一個div用來存放文件上傳時的信息??
2. //一個div用來存放上傳相關的按鈕??
3. <link?rel="stylesheet"?type="text/css"?href="./web-uploader/webuploader.css"?/>??
4. <!--<script?style="text/javascript"?src="./jQuery/jquery-2.2.3.min.js"></script>-->??
5. <script?type="text/javascript"?src="./web-uploader/webuploader.js"></script>??
6. <div?id="uploader"?class="wu-example">??
7. ????<!--用來存放文件信息-->??
8. ????<div?id="thelist"?class="uploader-list"></div>??
9. ????<div?class="btns">??
10. ????????<div?id="picker">選擇文件</div>??
11. ????????<button?id="ctlBtn"?class="btn?btn-default">開始上傳</button>??
12. ????????<button?id="goBack"?class="btn?btn-default">返回</button>??
13. ????</div>??
14. </div>??
15. /*??
16. 1、首先用WebUploader.create創建一個?WebUploader對象?，并在create中添加自定義配置項??
17. 2、然后手動給WebUploader對象添加事件，用到的基本事件是???
18. fileQueued?文件被添加進隊列的時候，在thelist?div?中顯示文件信息??
19. uploadProgress?文件上傳過程中創建進度條實時顯示??
20. uploadSuccess??
21. uploadError???
22. uploadComplete?在文件上傳完后都會觸發uploadComplete事件??
23. 3、最后?調用upload()方法實現上傳，??
24. */??
25. <script>??
26. var?uploader?=?WebUploader.create({??
27. ??
28. ????//?swf文件路徑??
29. ????swf:??'/js/Uploader.swf',??
30. ????formData:{"dn":$("#requestDn").val()},//參數列表??
31. ????//?文件接收服務端。??
32. ????server:?'/tp5/index/user/uploadFile',??
33. ????//?選擇文件的按鈕。可選。??
34. ????//?內部根據當前運行是創建，可能是input元素，也可能是flash.??
35. ????pick:?'#picker',??
36. ????//?不壓縮image,?默認如果是jpeg，文件上傳前會壓縮一把再上傳！??
37. ????resize:?false,??
38. ????//?只允許選擇圖片文件。??
39. ????accept:?{??
40. ????????title:?'file',??
41. ????????extensions:?'cer'??
42. //????????????????mimeTypes:?'.cer,'??
43. ????}??
44. });??
45. var?$list?=?$("#thelist");??
46. uploader.on(?'fileQueued',?function(?file?)?{??
47. ????$list.append(?'<div?id="'?+?file.id?+?'"?class="item">'?+??
48. ????????????'<h4?class="info">'?+?file.name?+?'</h4>'?+??
49. ????????????'<p?class="state">等待上傳...</p>'?+??
50. ????????????'<p?class="progress?progress-bar">上傳進度...</p>'?+??
51. ????????????'</div>'?);??
52. });??
53. ??
54. uploader.on(?'uploadSuccess',?function(?file?)?{??
55. ????$(?'#'+file.id?).find('p.state').text('已上傳');??
56. });??
57. //?文件上傳過程中創建進度條實時顯示。??
58. uploader.on(?'uploadProgress',?function(?file,?percentage?)?{??
59. ????var?$li?=?$(?'#'+file.id?),??
60. ????????????$percent?=?$li.find('.progress?.progress-bar');??
61. ??
62. ????//?避免重復創建??
63. ????if?(?!$percent.length?)?{??
64. ????????$percent?=?$('<div?class="progress?progress-striped?active">'?+??
65. ????????????????'<div?class="progress-bar"?role="progressbar"?style="width:?0%">'?+??
66. ????????????????'</div>'?+??
67. ????????????????'</div>').appendTo(?$li?).find('.progress-bar');??
68. ????}??
69. ??
70. ????$li.find('p.state').text('上傳中');??
71. ??
72. ????$percent.css(?'width',?percentage?*?100?+?'%'?);??
73. });??
74. uploader.on(?'uploadError',?function(?file?)?{??
75. ????$(?'#'+file.id?).find('p.state').text('上傳出錯');??
76. });??
77. ??
78. uploader.on(?'uploadComplete',?function(?file?)?{??
79. ????$(?'#'+file.id?).find('.progress').fadeOut();??
80. });??
81. ??
82. $("#ctlBtn").on('click',?function()?{??
83. ????uploader.upload();??
84. });??
85. $("#goBack").on('click',?function()?{??
86. ????$("#uploadFileDiv").empty();??
87. ????$("#uploadFile").removeClass("hidden");??
88. });??
89. </script>??

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

2.1、Uploader類 上傳入口類
2.1.1、參數說明，下面所有參數都是可選的，并且都有默認值

1. var?uploader?=?WebUploader.Uploader({?????
2. ????//幾個常用的參數：swf,pick,formData,runtimeOrder??
3. ??????
4. ????//所有參數列表??
5. ????swf:?'path_of_swf/Uploader.swf',??
6. ????dnd:?'#dndArea',?//?[默認值：undefined]?指定Drag?And?Drop拖拽的容器，如果不指定，則不啟動。??
7. ????disableGlobalDnd:?true,,?//?[默認值：false]?是否禁掉整個頁面的拖拽功能，如果不禁用，圖片拖進來的時候會默認被瀏覽器打開??
8. ????paste:?'#uploader',?//?[默認值：undefined]?指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片。建議設置為document.body.??
9. ????pick:'#filePicker',//也可以用下面的方式詳細配置??
10. ????//?{Selector,?Object}??[默認值：undefined]?指定選擇文件的按鈕容器，不指定則不創建按鈕。??
11. ????pick:?{??
12. ????????id:?'#filePicker',//Seletor|dom?指定選擇文件的按鈕容器，不指定則不創建按鈕。注意?這里雖然寫的是?id,?但是不是只支持?id,?還支持?class,?或者?dom?節點。??
13. ????????label:?'點擊選擇圖片',//請采用?innerHTML?代替??
14. ????????innerHTML:?"點擊選擇圖片",//?指定按鈕文字。不指定時優先從指定的容器中看是否自帶文字。??
15. ????????multiple:true?//是否開起同時選擇多個文件能力。??
16. ????},??
17. ????//限制上傳的文件類型??
18. ????accept:?{??
19. ????????title:?'Images',//?{String}?文字描述??
20. ????????extensions:?'gif,jpg,jpeg,bmp,png,rar',//?{String}?允許的文件后綴，不帶點，多個用逗號分割。??
21. ????????mimeTypes:?'image/gif，image/jpg，image/jpeg，image/bmp，image/png，.rar'//?多個用逗號分割。??
22. ????},??
23. ????//?設置縮略圖。??
24. ????thumb:?{??
25. ????????width:?110,??
26. ????????height:?110,??
27. ????????//?圖片質量，只有type為`image/jpeg`的時候才有效。??
28. ????????quality:?70,??
29. ????????//?是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.??
30. ????????allowMagnify:?true,??
31. ????????//?是否允許裁剪。是否采用裁剪模式。如果采用這樣可以避免空白內容。??
32. ????????crop:?true,??
33. ????????//?為空的話則保留原有圖片格式。??
34. ????????//?否則強制轉換成指定的類型。??
35. ????????type:?'image/jpeg'??
36. ????},??
37. ????//?配置壓縮的圖片的選項。如果此選項為false,?則圖片在上傳前不進行壓縮。??
38. ????compress:?{??
39. ????????width:?1600,??
40. ????????height:?1600,??
41. ????????//?圖片質量，只有type為`image/jpeg`的時候才有效。??
42. ????????quality:?90,??
43. ????????//?是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.??
44. ????????allowMagnify:?false,??
45. ????????//?是否允許裁剪。??
46. ????????crop:?false,??
47. ????????//?是否保留頭部meta信息。??
48. ????????preserveHeaders:?true,??
49. ????????//?如果發現壓縮后文件大小比原來還大，則使用原來圖片??
50. ????????//?此屬性可能會影響圖片自動糾正功能??
51. ????????noCompressIfLarger:?false,??
52. ????????//?單位字節，如果圖片大小小于此值，不會采用壓縮。??
53. ????????compressSize:?0??
54. ????},???
55. ??
56. ??
57. ????auto:?true,?//?[默認值：false]?設置為?true?后，不需要手動調用上傳，有文件選擇即開始上傳。??
58. ????runtimeOrder:?'flash',?//?[默認值：html5,flash]?指定運行時啟動順序。默認會想嘗試?html5?是否支持，如果支持則使用?html5,?否則則使用?flash.可以將此值設置成?flash，來強制使用?flash?運行時。??
59. ????prepareNextFile:false,?//?[默認值：false]?是否允許在文件傳輸時提前把下一個文件準備好。?對于一個文件的準備工作比較耗時，比如圖片壓縮，md5序列化。?如果能提前在當前文件傳輸期處理，可以節省總體耗時。??
60. ????chunked:false,?//?[默認值：false]?是否要分片處理大文件上傳。??
61. ????chunkSize:?512?*?1024,//?[默認值：5242880]?如果要分片，分多大一片？?默認大小為5M.??
62. ????chunkRetry:2,?//?[默認值：2]?如果某個分片由于網絡問題出錯，允許自動重傳多少次？??
63. ????threads:3,?//?[默認值：3]?上傳并發數。允許同時最大上傳進程數。??
64. ????formData:?{"data":"value","data":"value"},?//?[默認值：{}]?文件上傳請求的參數表，每次發送都會發送此對象中的參數。??
65. ????fileVal:"file",?//?[默認值：'file']?設置文件上傳域的name。??
66. ????method?:"POST",?//?[默認值：'POST']?文件上傳方式，POST或者GET。??
67. ????sendAsBinary?:false,?//?[默認值：false]?是否已二進制的流的方式發送文件，這樣整個上傳內容php://input都為文件內容，?其他參數在$_GET數組中。??
68. ????fileNumLimit?:10,?//?[默認值：undefined]?驗證文件總數量,?超出則不允許加入隊列。??
69. ????fileSizeLimit?:?200?*?1024?*?1024,????//?200?M??[默認值：undefined]?驗證文件總大小是否超出限制,?超出則不允許加入隊列。??
70. ????fileSingleSizeLimit:?50?*?1024?*?1024,????//?50?M?[默認值：undefined]?驗證單個文件大小是否超出限制,?超出則不允許加入隊列。??
71. ????duplicate?:true,?//?[默認值：undefined]?去重，?根據文件名字、文件大小和最后修改時間來生成hash?Key.??
72. ????disableWidgets:?{String,?Array},?//?[默認值：undefined]?默認所有?Uploader.register?了的?widget?都會被加載，如果禁用某一部分，請通過此?option?指定黑名單。??
73. });??

2.1.2、uploader對象的選項

1. 1、option()?獲取或者設置Uploader配置項。??
2. //?修改后圖片上傳前，嘗試將圖片壓縮到1600?*?1600??
3. uploader.option(?'compress',?{??
4. ????width:?1600,??
5. ????height:?1600??
6. });???
7. 2、getStats()?獲取文件統計信息。返回一個包含一下信息的對象。??
8. //successNum?上傳成功的文件數??
9. //progressNum?上傳中的文件數??
10. //cancelNum?被刪除的文件數??
11. //invalidNum?無效的文件數??
12. //uploadFailNum?上傳失敗的文件數??
13. //queueNum?還在隊列中的文件數??
14. //interruptNum?被暫停的文件數??
15. stats?=?uploader.getStats();??
16. if?(?stats.successNum?&&?!stats.uploadFailNum?)?{??
17. ????setState(?'finish'?);??
18. ????return;??
19. }??
20. 3、destroy()?銷毀?webuploader?實例??
21. 4、addButton()?添加文件選擇按鈕，如果一個按鈕不夠，需要調用此方法來添加。參數跟options.pick一致。??
22. ????uploader.addButton({??
23. ????????id:?'#filePicker2',??
24. ????????label:?'繼續添加'??
25. ????});??
26. 5、makeThumb()?生成縮略圖，此過程為異步，所以需要傳入callback。?通常情況在圖片加入隊里后調用此方法來生成預覽圖以增強交互效果。??
27. ????????????當?width?或者?height?的值介于?0?-?1?時，被當成百分比使用。??
28. ????????????callback中可以接收到兩個參數。??
29. ????????????第一個為error，如果生成縮略圖有錯誤，此error將為真。??
30. ????????????第二個為ret,?縮略圖的Data?URL值。??
31. ????????????注意?Date?URL在IE6/7中不支持，所以不用調用此方法了，直接顯示一張暫不支持預覽圖片好了。?也可以借助服務端，將?base64?數據傳給服務端，生成一個臨時文件供預覽。??
32. ????uploader.makeThumb(?file,?function(?error,?src?)?{??
33. ????var?img;??
34. ??
35. ????if?(?error?)?{??
36. ????????$wrap.text(?'不能預覽'?);??
37. ????????return;??
38. ????}??
39. ??
40. ????if(?isSupportBase64?)?{??
41. ????????img?=?$('<img?src="'+src+'">');??
42. ????????$wrap.empty().append(?img?);??
43. ????}?else?{??
44. ????????$.ajax('../../server/preview.php',?{??
45. ????????????method:?'POST',??
46. ????????????data:?src,??
47. ????????????dataType:'json'??
48. ????????}).done(function(?response?)?{??
49. ????????????if?(response.result)?{??
50. ????????????????img?=?$('<img?src="'+response.result+'">');??
51. ????????????????$wrap.empty().append(?img?);??
52. ????????????}?else?{??
53. ????????????????$wrap.text("預覽出錯");??
54. ????????????}??
55. ????????});??
56. ????}??
57. },?thumbnailWidth,?thumbnailHeight?);??
58. ??
59. 6、md5File()?計算文件?md5?值，返回一個?promise?對象，可以監聽?progress?進度。??
60. 7、addFiles()??添加文件到隊列??
61. 8、removeFile()??移除某一文件,?默認只會標記文件狀態為已取消，如果第二個參數為?true?則會從?queue?中移除??
62. 9、getFiles()??返回指定狀態的文件集合，不傳參數將返回所有狀態的文件。??
63. 10、retry()?重試上傳，重試指定文件，或者從出錯的文件開始重新上傳。??
64. 11、sort()?排序隊列中的文件，在上傳之前調整可以控制上傳順序。??
65. 12、reset()?重置uploader。目前只重置了隊列。??
66. 13、predictRuntimeType()?預測Uploader將采用哪個Runtime??
67. 14、upload()?開始上傳。此方法可以從初始狀態調用開始上傳流程，也可以從暫停狀態調用，繼續上傳流程。可以指定開始某一個文件??
68. 15、stop()?暫停上傳。第一個參數為是否中斷上傳當前正在上傳的文件。如果第一個參數是文件，則只暫停指定文件。??
69. 16、cancelFile()?標記文件狀態為已取消,?同時將中斷文件傳輸。??
70. 17、isInProgress()?判斷Uplaoder是否正在上傳中。??
71. 18、skipFile()?掉過一個文件上傳，直接標記指定文件為已上傳狀態。??
72. 19、request()?發送命令。當傳入callback或者handler中返回promise時。返回一個當所有handler中的promise都完成后完成的新promise。??
73. ??
74. 20、Uploader.register()?添加組件??
75. 21、Uploader.unRegister()?刪除插件，只有在注冊時指定了名字的才能被刪除。??

2.1.3、事件說明

1. dndAccept?://?阻止,此事件可以拒絕某些類型的文件拖入進來。目前只有?chrome?提供這樣的?API，且只能通過?mime-type?驗證。??
2. beforeFileQueued?://?當文件被加入隊列之前觸發，此事件的handler返回值為false，則此文件不會被添加進入隊列。??
3. fileQueued?://?當文件被加入隊列以后觸發。??
4. filesQueued?://?當一批文件添加進隊列以后觸發。??
5. fileDequeued?://?當文件被移除隊列后觸發。??
6. reset?://?當?uploader?被重置的時候觸發。??
7. startUpload?://?當開始上傳流程時觸發。??
8. stopUpload?://?當開始上傳流程暫停時觸發。??
9. uploadFinished?://?當所有文件上傳結束時觸發。??
10. uploadStart?://?某個文件開始上傳前觸發，一個文件只會觸發一次。??
11. uploadBeforeSend?://?當某個文件的分塊在發送前觸發，主要用來詢問是否要添加附帶參數，大文件在開起分片上傳的前提下此事件可能會觸發多次。??
12. uploadAccept?://?當某個文件上傳到服務端響應后，會派送此事件來詢問服務端響應是否有效。如果此事件handler返回值為false,?則此文件將派送server類型的uploadError事件。??
13. uploadProgress?://?上傳過程中觸發，攜帶上傳進度。??
14. uploadError?://?當文件上傳出錯時觸發。??
15. uploadSuccess?://?當文件上傳成功時觸發。??
16. uploadComplete?://?不管成功或者失敗，文件上傳完成時觸發。??
17. error?://?當validate不通過時，會以派送錯誤事件的形式通知調用者。通過upload.on('error',?handler)可以捕獲到此類錯誤，目前有以下錯誤會在特定的情況下派送錯來。??
18. ????????//Q_EXCEED_NUM_LIMIT?在設置了fileNumLimit且嘗試給uploader添加的文件數量超出這個值時派送。??
19. ????????//Q_EXCEED_SIZE_LIMIT?在設置了Q_EXCEED_SIZE_LIMIT且嘗試給uploader添加的文件總大小超出這個值時派送。??
20. ????????//Q_TYPE_DENIED?當文件類型不滿足時觸發。。??
21. /*Web?Uploader內部類的詳細說明，以下提及的功能類，都可以在`WebUploader`這個變量中訪問到。?即?Base類?Mediator類??File類都可以在`WebUploader`這個變量中訪問到*/??

2.2、Base類 基礎類方法 WebUploader 基礎類，提供一些簡單常用的方法 ?WebUploader.browser.ie

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

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

1. on?once?off?trigger?installTo??

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

1. name//文件名，包括擴展名（后綴）??
2. size//文件體積（字節）??
3. type//文件MIMETYPE類型，與文件類型的對應關系請參考http://t.cn/z8ZnFny??
4. lastModifiedDate//文件最后修改日期??
5. id//文件ID，每個對象具有唯一ID，與文件名無關??
6. ext//文件擴展名，通過文件名獲取，例如test.png的擴展名為png??
7. statusText//狀態文字說明。在不同的status語境下有不同的用途。??
8. setStatus//設置狀態，狀態變化時會觸發change事件。??
9. ????setStatus(?status[,?statusText]?);//參數:status?{File.Status,?String}文件狀態值??
10. ????????statusText?//{String}?[可選]?[默認值:?'']?狀態說明，常在error時使用，用http,?abort,server等來標記是由于什么原因導致文件錯誤。??
11. File.Status//文件狀態值，具體包括以下幾種類型：??
12. ????inited?初始狀態??
13. ????queued?已經進入隊列,?等待上傳??
14. ????progress?上傳中??
15. ????complete?上傳完成。??
16. ????error?上傳出錯，可重試??
17. ????interrupt?上傳中斷，可續傳。??
18. ????invalid?文件不合格，不能重試上傳。會自動從隊列中移除。??
19. ????cancelled?文件被移除。??

2.5、Queue 類 文件隊列, 用來存儲各個狀態中的文件

1. stats//統計文件數。??
2. ????numOfQueue?隊列中的文件數。??
3. ????numOfSuccess?上傳成功的文件數??
4. ????numOfCancel?被取消的文件數??
5. ????numOfProgress?正在上傳中的文件數??
6. ????numOfUploadFailed?上傳錯誤的文件數。??
7. ????numOfInvalid?無效的文件數。??
8. ????numofDeleted?被移除的文件數。??
9. append//將新文件加入對隊列尾部??
10. prepend//將新文件加入對隊列頭部??
11. getFile//獲取文件對象??
12. fetch//從隊列中取出一個指定狀態的文件。??
13. sort//對隊列進行排序，能夠控制文件上傳順序。??
14. getFiles//獲取指定類型的文件列表,?列表中每一個成員為File對象。??
15. removeFile//在隊列中刪除文件。??

github中的代碼給的例子基本上可以實現想要的功能，如果有別的需求可以結合代碼中的例子根據接口手冊進行相應的修改。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。