TOP

Jquery插件(一) webupload上傳插件
2017-10-10 16:12:15 】 瀏覽:10093
Tags:

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         });

1、server  修改為自己的后臺處理類 通過 HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; request.Files的方式獲取插件上傳的圖片。

2、示例程序默認是啟用壓縮的,這個可以設置优乐棋牌app下载,當圖片大于多少是可以自動壓縮圖片的,如果不需要壓縮,則需要再初始化的時候添加 compress:false, 屬性

3、

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

官方上傳圖片的示例不知道什么原因把圖片篩選這個注釋掉了,如果想上傳的文件只能選擇圖片,則需要去掉注釋

4、增加了對圖片像素大小的判斷,自己用了uploadAccept 方法优乐棋牌app下载,是把圖片提交上去了之后再后臺進行判斷的,(不知是否有更好的辦法)因為插件本身的file類是可以處理文件的,所以并沒有單獨獲取像素的屬性优乐棋牌app下载,示例:

 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的時候,會導致圖片上傳失敗,所以后臺判斷像素后通過后臺返回的狀態來改變圖片上傳的狀態。

 

請關注公眾號獲取更多資料



】【打印繁體】【】【】 【】【】【】 【關閉】 【返回頂部
上一篇認識less和webstrom的less配置 下一篇select2加載遠程數據示例