Jquery插件(一) webupload上傳插件

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5爲主，FLASH爲輔的現代文件上傳組件。在現代的瀏覽器裏面能充分發揮HTML5的優點，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。兩套運行時，一樣的調用方式，可供用戶任意選用。採用大文件分片併發上傳，極大的提升了文件上傳效率。

這個插件很好用，功能也比較強大，比ajaxfileupload要強大，可去官方網站下載。

目前項目中只用到了圖片批量上傳功能，官方示例已經寫的很詳細了，下面介紹下如何把官方示例遷移到本身的項目中：

 1    // 實例化
 2         uploader = WebUploader.create({
 3             pick: {
 4                 id: '#filePicker',
 5                 label: '點擊選擇圖片'
 6             },
 7             formData: {
 8                 uid: 123
 9             },
10             dnd: '#dndArea',
11             paste: '#uploader',
12             swf: '../../dist/Uploader.swf',
13             chunked: false,
14             chunkSize: 512 * 1024,
15             server: '../../server/fileupload.php',
16             // runtimeOrder: 'flash',
17 
18             // accept: {
19             //     title: 'Images',
20             //     extensions: 'gif,jpg,jpeg,bmp,png',
21             //     mimeTypes: 'image/*'
22             // },
23 
24             // 禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
25             disableGlobalDnd: true,
26             fileNumLimit: 300,
27             fileSizeLimit: 200 * 1024 * 1024,    // 200 M
28             fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
29         });

一、server  修改成本身的後臺處理類 經過 HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; request.Files的方式獲取插件上傳的圖片。

二、示例程序默認是啓用壓縮的，這個能夠設置，當圖片大於多少是能夠自動壓縮圖片的，若是不須要壓縮，則須要再初始化的時候添加 compress:false, 屬性

三、

1  accept: {
2               title: 'Images',
3               extensions: 'gif,jpg,jpeg,bmp,png',
4                mimeTypes: 'image/*'
5             },

官方上傳圖片的示例不知道什麼緣由把圖片篩選這個註釋掉了，若是想上傳的文件只能選擇圖片，則須要去掉註釋

四、增長了對圖片像素大小的判斷，本身用了uploadAccept 方法，是把圖片提交上去了以後再後臺進行判斷的，（不知是否有更好的辦法）由於插件自己的file類是能夠處理文件的，因此並無單獨獲取像素的屬性，示例：

 1   uploader.on('uploadAccept', function (object, ret) {
 2 
 3             var resJson = $.parseJSON(ret._raw);
 4             if (resJson.result == "error") {
 5                 alert(object.file.name + "象素過低，請檢查上傳！");
 6                 return false;
 7             }
 8 
 9 
10         });

該方法返回false的時候，會致使圖片上傳失敗，因此後臺判斷像素後經過後臺返回的狀態來改變圖片上傳的狀態。