ajax上传plupload的使用
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
前端上傳組件Plupload使用指南
我之前寫(xiě)過(guò)一篇文章《文件上傳利器SWFUpload使用指南》，里面介紹了上傳組件SWFUpload的使用方法，但現(xiàn)在隨著html5技術(shù)的逐漸推廣和普及，再去使用以flash為上傳手段的SWFUpload顯然就有點(diǎn)過(guò)時(shí)了，畢竟html5原生的就給我們提供了文件上傳的API。Plupload是一款由著名的web編輯器TinyMCE團(tuán)隊(duì)開(kāi)發(fā)的上傳組件，簡(jiǎn)單易用且功能強(qiáng)大，我們完全可以使用Plupload來(lái)代替以前的SWFUpload。
Plupload有以下功能和特點(diǎn)：
1、擁有多種上傳方式：HTML5、flash、silverlight以及傳統(tǒng)的<input type=”file” />。Plupload會(huì)自動(dòng)偵測(cè)當(dāng)前的環(huán)境，選擇最合適的上傳方式，并且會(huì)優(yōu)先使用HTML5的方式。所以你完全不用去操心當(dāng)前的瀏覽器支持哪些上傳方式，Plupload會(huì)自動(dòng)為你選擇最合適的方式。
2、支持以拖拽的方式來(lái)選取要上傳的文件
3、支持在前端壓縮圖片，即在圖片文件還未上傳之前就對(duì)它進(jìn)行壓縮
4、可以直接讀取原生的文件數(shù)據(jù)，這樣的好處就是例如可以在圖片文件還未上傳之前就能把它顯示在頁(yè)面上預(yù)覽
5、支持把大文件切割成小片進(jìn)行上傳，因?yàn)橛行g覽器對(duì)很大的文件比如幾G的一些文件無(wú)法上傳。
?
Plupload的使用方法也與SWFUpload非常類(lèi)似，可以分為以下幾步：
1、引入js文件，plupload的源文件可以到github上去下載
2、實(shí)例化一個(gè)plupload對(duì)象，傳入一個(gè)配置參數(shù)對(duì)象進(jìn)行各方面的配置。
3、調(diào)用plupload實(shí)例對(duì)象的init()方法進(jìn)行初始化
4、在plupload實(shí)例對(duì)象上注冊(cè)各種你需要的事件。plupload從選取文件到文件上傳完成這個(gè)過(guò)程中，會(huì)觸發(fā)很多事件。我們可以通過(guò)這些事件來(lái)跟plupload進(jìn)行交互。
5、實(shí)現(xiàn)你自己所注冊(cè)的那些事件的監(jiān)聽(tīng)函數(shù)，利用這些監(jiān)聽(tīng)函數(shù)來(lái)進(jìn)行更新UI、提示上傳進(jìn)度等工作。
大家可以到http://chaping.github.io/plupload/demo/看一下我寫(xiě)的關(guān)于plupload的幾個(gè)上傳demo。
下面用一段代碼來(lái)說(shuō)明Plupload的使用方法。
首先看下我的目錄結(jié)構(gòu)
index.html的代碼如下：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Plupload使用指南</title><!-- 首先需要引入plupload的源代碼 --><script src="js/plupload.full.min.js"></script> </head> <body><!-- 這里我們只使用最基本的html結(jié)構(gòu)：一個(gè)選擇文件的按鈕，一個(gè)開(kāi)始上傳文件的按鈕(甚至該按鈕也可以不要) --><p><button id="browse">選擇文件</button><button id="start_upload">開(kāi)始上傳</button></p><script>//實(shí)例化一個(gè)plupload上傳對(duì)象var uploader = new plupload.Uploader({browse_button : 'browse', //觸發(fā)文件選擇對(duì)話框的按鈕，為那個(gè)元素idurl : 'upload.php', //服務(wù)器端的上傳頁(yè)面地址flash_swf_url : 'js/Moxie.swf', //swf文件，當(dāng)需要使用swf方式進(jìn)行上傳時(shí)需要配置該參數(shù)silverlight_xap_url : 'js/Moxie.xap' //silverlight文件，當(dāng)需要使用silverlight方式進(jìn)行上傳時(shí)需要配置該參數(shù)}); //在實(shí)例對(duì)象上調(diào)用init()方法進(jìn)行初始化uploader.init();//綁定各種事件，并在事件監(jiān)聽(tīng)函數(shù)中做你想做的事uploader.bind('FilesAdded',function(uploader,files){//每個(gè)事件監(jiān)聽(tīng)函數(shù)都會(huì)傳入一些很有用的參數(shù)，//我們可以利用這些參數(shù)提供的信息來(lái)做比如更新UI，提示上傳進(jìn)度等操作});uploader.bind('UploadProgress',function(uploader,file){//每個(gè)事件監(jiān)聽(tīng)函數(shù)都會(huì)傳入一些很有用的參數(shù)，//我們可以利用這些參數(shù)提供的信息來(lái)做比如更新UI，提示上傳進(jìn)度等操作});//......//......//最后給"開(kāi)始上傳"按鈕注冊(cè)事件document.getElementById('start_upload').onclick = function(){uploader.start(); //調(diào)用實(shí)例對(duì)象的start()方法開(kāi)始上傳文件，當(dāng)然你也可以在其他地方調(diào)用該方法}</script> </body> </html>?
使用Plupload的關(guān)鍵是了解它眾多的配置參數(shù)、事件以及屬性和方法。我把它官網(wǎng)上的文檔翻譯成了中文并整理如下。我也把它放到了github上，你可以到http://chaping.github.io/plupload/doc/去查閱。
目錄：
一、配置參數(shù)
二、各種事件說(shuō)明
三、Plupload實(shí)例的屬性
四、Plupload實(shí)例的方法
五、文件對(duì)象的屬性和方法
六、QueueProgress 對(duì)象的屬性
七、plupload命名空間上的一些屬性
一、配置參數(shù)
實(shí)例化一個(gè)plupload對(duì)象時(shí)，也就是?new plupload.Uploader()，需要傳入一個(gè)對(duì)象作為配置參數(shù)。后面內(nèi)容中出現(xiàn)的plupload實(shí)例均是指new plupload.Uploader()得到的實(shí)例對(duì)象
| String / DOM | ? | 觸發(fā)文件選擇對(duì)話框的DOM元素，當(dāng)點(diǎn)擊該元素后便后彈出文件選擇對(duì)話框。該值可以是DOM元素對(duì)象本身，也可以是該DOM元素的id |
| String | ? | 服務(wù)器端接收和處理上傳文件的腳本地址，可以是相對(duì)路徑(相對(duì)于當(dāng)前調(diào)用Plupload的文檔)，也可以是絕對(duì)路徑 |
| Object | { } | 可以使用該參數(shù)來(lái)限制上傳文件的類(lèi)型，大小等，該參數(shù)以對(duì)象的形式傳入，它包括三個(gè)屬性： mime_types：用來(lái)限定上傳文件的類(lèi)型，為一個(gè)數(shù)組，該數(shù)組的每個(gè)元素又是一個(gè)對(duì)象，該對(duì)象有title和extensions兩個(gè)屬性，title為該過(guò)濾器的名稱(chēng)，extensions為文件擴(kuò)展名，有多個(gè)時(shí)用逗號(hào)隔開(kāi)。該屬性默認(rèn)為一個(gè)空數(shù)組，即不做限制。 max_file_size：用來(lái)限定上傳文件的大小，如果文件體積超過(guò)了該值，則不能被選取。值可以為一個(gè)數(shù)字，單位為b,也可以是一個(gè)字符串，由數(shù)字和單位組成，如'200kb' prevent_duplicates：是否允許選取重復(fù)的文件，為true時(shí)表示不允許，為false時(shí)表示允許，默認(rèn)為false。如果兩個(gè)文件的文件名和大小都相同，則會(huì)被認(rèn)為是重復(fù)的文件 filters完整的配置示例如下(當(dāng)然也可以只配置其中的某一項(xiàng))： filters: {mime_types : [ //只允許上傳圖片和zip文件{ title : "Image files", extensions : "jpg,gif,png" }, { title : "Zip files", extensions : "zip" }],max_file_size : '400kb', //最大只能上傳400kb的文件prevent_duplicates : true //不允許選取重復(fù)文件 } |
| Object | ? | 設(shè)置上傳時(shí)的自定義頭信息，以鍵/值對(duì)的形式傳入，鍵代表頭信息屬性名，鍵代表屬性值。html4上傳方式不支持設(shè)置該屬性。 |
| Boolean | true | 為true時(shí)將以multipart/form-data的形式來(lái)上傳文件，為false時(shí)則以二進(jìn)制的格式來(lái)上傳文件。html4上傳方式不支持以二進(jìn)制格式來(lái)上傳文件，在flash上傳方式中，二進(jìn)制上傳也有點(diǎn)問(wèn)題。并且二進(jìn)制格式上傳還需要在服務(wù)器端做特殊的處理。一般我們用multipart/form-data的形式來(lái)上傳文件就足夠了。 |
| Object | ? | 上傳時(shí)的附加參數(shù)，以鍵/值對(duì)的形式傳入，服務(wù)器端可是使用$_POST來(lái)獲取這些參數(shù)(以php為例)。比如： multipart_params: {one: '1',two: '2',three: { //值還可以是一個(gè)字面量對(duì)象a: '4',b: '5'},four: ['6', '7', '8'] //也可以是一個(gè)數(shù)組 } |
| Number | 0 | 當(dāng)發(fā)生plupload.HTTP_ERROR錯(cuò)誤時(shí)的重試次數(shù)，為0時(shí)表示不重試 |
| Number/String | 0 | 分片上傳文件時(shí)，每片文件被切割成的大小，為數(shù)字時(shí)單位為字節(jié)。也可以使用一個(gè)帶單位的字符串，如"200kb"。當(dāng)該值為0時(shí)表示不使用分片上傳功能 |
| Object | ? | 可以使用該參數(shù)對(duì)將要上傳的圖片進(jìn)行壓縮，該參數(shù)是一個(gè)對(duì)象，里面包括5個(gè)屬性： width：指定壓縮后圖片的寬度，如果沒(méi)有設(shè)置該屬性則默認(rèn)為原始圖片的寬度 height：指定壓縮后圖片的高度，如果沒(méi)有設(shè)置該屬性則默認(rèn)為原始圖片的高度 crop：是否裁剪圖片 quality：壓縮后圖片的質(zhì)量，只對(duì)jpg格式的圖片有效，默認(rèn)為90。quality可以跟width和height一起使用，但也可以單獨(dú)使用，單獨(dú)使用時(shí)，壓縮后圖片的寬高不會(huì)變化，但由于質(zhì)量降低了，所以體積也會(huì)變小 preserve_headers：壓縮后是否保留圖片的元數(shù)據(jù)，true為保留，false為不保留,默認(rèn)為true。刪除圖片的元數(shù)據(jù)能使圖片的體積減小一點(diǎn)點(diǎn) resize參數(shù)的配置示例如下： resize: {width: 100,height: 100,crop: true,quality: 60,preserve_headers: false } |
| DOM/String/Array | ? | 指定了使用拖拽方式來(lái)選擇上傳文件時(shí)的拖拽區(qū)域，即可以把文件拖拽到這個(gè)區(qū)域的方式來(lái)選擇文件。該參數(shù)的值可以為一個(gè)DOM元素的id,也可是DOM元素本身，還可以是一個(gè)包括多個(gè)DOM元素的數(shù)組。如果不設(shè)置該參數(shù)則拖拽上傳功能不可用。目前只有html5上傳方式才支持拖拽上傳。 |
| Boolean | true | 是否可以在文件瀏覽對(duì)話框中選擇多個(gè)文件，true為可以，false為不可以。默認(rèn)true，即可以選擇多個(gè)文件。需要注意的是，在某些不支持多選文件的環(huán)境中，默認(rèn)值是false。比如在ios7的safari瀏覽器中，由于存在bug，造成不能多選文件。當(dāng)然，在html4上傳方式中，也是無(wú)法多選文件的。 |
| Mix | ? | 可以使用該參數(shù)來(lái)設(shè)置你必須需要的一些功能特征，Plupload會(huì)根據(jù)你的設(shè)置來(lái)選擇合適的上傳方式。因?yàn)?#xff0c;不同的上傳方式，支持的功能是不同的，比如拖拽上傳只有html5上傳方式支持，圖片壓縮則只有html5,flash,silverlight上傳方式支持。該參數(shù)的值是一個(gè)混合類(lèi)型，可以是一個(gè)以逗號(hào)分隔的字符串， |
| Boolean | false | 當(dāng)值為true時(shí)會(huì)為每個(gè)上傳的文件生成一個(gè)唯一的文件名，并作為額外的參數(shù)post到服務(wù)器端，參數(shù)明為name,值為生成的文件名。 |
| String | html5,flash, silverlight, html4 | 用來(lái)指定上傳方式，指定多個(gè)上傳方式請(qǐng)使用逗號(hào)隔開(kāi)。一般情況下，你不需要配置該參數(shù)，因?yàn)镻lupload默認(rèn)會(huì)根據(jù)你的其他的參數(shù)配置來(lái)選擇最合適的上傳方式。如果沒(méi)有特殊要求的話，Plupload會(huì)首先選擇html5上傳方式，如果瀏覽器不支持html5，則會(huì)使用flash或silverlight，如果前面兩者也都不支持，則會(huì)使用最傳統(tǒng)的html4上傳方式。如果你想指定使用某個(gè)上傳方式，或改變上傳方式的優(yōu)先順序，則你可以配置該參數(shù)。 |
| String | file | 指定文件上傳時(shí)文件域的名稱(chēng)，默認(rèn)為file,例如在php中你可以使用$_FILES['file']來(lái)獲取上傳的文件信息 |
| DOM/String | ? | 用來(lái)指定Plupload所創(chuàng)建的html結(jié)構(gòu)的父容器，默認(rèn)為前面指定的browse_button的父元素。該參數(shù)的值可以是一個(gè)元素的id,也可以是DOM元素本身。 |
| String | js/Moxie.swf | flash上傳組件的url地址，如果是相對(duì)路徑，則相對(duì)的是調(diào)用Plupload的html文檔。當(dāng)使用flash上傳方式會(huì)用到該參數(shù)。 |
| String | js/Moxie.xap | silverlight上傳組件的url地址，如果是相對(duì)路徑，則相對(duì)的是調(diào)用Plupload的html文檔。當(dāng)使用silverlight上傳方式會(huì)用到該參數(shù)。 |
二、各種事件說(shuō)明
要了解plupload的運(yùn)行狀況，靠的就是在這些事件了
| 當(dāng)Plupload初始化完成后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader) uploader為當(dāng)前的plupload實(shí)例對(duì)象 |
| 當(dāng)Init事件發(fā)生后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader) uploader為當(dāng)前的plupload實(shí)例對(duì)象 |
| 當(dāng)使用Plupload實(shí)例的setOption()方法改變當(dāng)前配置參數(shù)后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,option_name,new_value,old_value) uploader為當(dāng)前的plupload實(shí)例對(duì)象，option_name為發(fā)生改變的參數(shù)名稱(chēng)，new_value為改變后的值，old_value為改變前的值 |
| 當(dāng)調(diào)用plupload實(shí)例的refresh()方法后會(huì)觸發(fā)該事件，暫時(shí)不清楚還有什么其他動(dòng)作會(huì)觸發(fā)該事件，但據(jù)我測(cè)試，把文件添加到上傳隊(duì)列后也會(huì)觸發(fā)該事件。 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader) uploader為當(dāng)前的plupload實(shí)例對(duì)象 |
| 當(dāng)上傳隊(duì)列的狀態(tài)發(fā)生改變時(shí)觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader) uploader為當(dāng)前的plupload實(shí)例對(duì)象 |
| 當(dāng)上傳隊(duì)列中某一個(gè)文件開(kāi)始上傳后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,file) uploader為當(dāng)前的plupload實(shí)例對(duì)象，file為觸發(fā)此事件的文件對(duì)象 |
| 當(dāng)隊(duì)列中的某一個(gè)文件正要開(kāi)始上傳前觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,file) uploader為當(dāng)前的plupload實(shí)例對(duì)象，file為觸發(fā)此事件的文件對(duì)象 |
| 當(dāng)上傳隊(duì)列發(fā)生變化后觸發(fā)，即上傳隊(duì)列新增了文件或移除了文件。QueueChanged事件會(huì)比FilesAdded或FilesRemoved事件先觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader) uploader為當(dāng)前的plupload實(shí)例對(duì)象 |
| 會(huì)在文件上傳過(guò)程中不斷觸發(fā)，可以用此事件來(lái)顯示上傳進(jìn)度 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,file) uploader為當(dāng)前的plupload實(shí)例對(duì)象，file為觸發(fā)此事件的文件對(duì)象 |
| 當(dāng)文件從上傳隊(duì)列移除后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,files) uploader為當(dāng)前的plupload實(shí)例對(duì)象，files為一個(gè)數(shù)組，里面的元素為本次事件所移除的文件對(duì)象 |
| 暫不清楚該事件的意義，但根據(jù)測(cè)試得出，該事件會(huì)在每一個(gè)文件被添加到上傳隊(duì)列前觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,file) uploader為當(dāng)前的plupload實(shí)例對(duì)象，file為觸發(fā)此事件的文件對(duì)象 |
| 當(dāng)文件添加到上傳隊(duì)列后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,files) uploader為當(dāng)前的plupload實(shí)例對(duì)象，files為一個(gè)數(shù)組，里面的元素為本次添加到上傳隊(duì)列里的文件對(duì)象 |
| 當(dāng)隊(duì)列中的某一個(gè)文件上傳完成后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,file,responseObject) uploader為當(dāng)前的plupload實(shí)例對(duì)象，file為觸發(fā)此事件的文件對(duì)象，responseObject為服務(wù)器返回的信息對(duì)象，它有以下3個(gè)屬性： response：服務(wù)器返回的文本 responseHeaders：服務(wù)器返回的頭信息 status：服務(wù)器返回的http狀態(tài)碼，比如200 |
| 當(dāng)使用文件小片上傳功能時(shí)，每一個(gè)小片上傳完成后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,file,responseObject) uploader為當(dāng)前的plupload實(shí)例對(duì)象，file為觸發(fā)此事件的文件對(duì)象，responseObject為服務(wù)器返回的信息對(duì)象，它有以下5個(gè)屬性： offset：該文件小片在整體文件中的偏移量 response：服務(wù)器返回的文本 responseHeaders：服務(wù)器返回的頭信息 status：服務(wù)器返回的http狀態(tài)碼，比如200 total：該文件(指的是被切割成了許多文件小片的那個(gè)文件)的總大小，單位為字節(jié) |
| 當(dāng)上傳隊(duì)列中所有文件都上傳完成后觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,files) uploader為當(dāng)前的plupload實(shí)例對(duì)象，files為一個(gè)數(shù)組，里面的元素為本次已完成上傳的所有文件對(duì)象 |
| 當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader,errObject) uploader為當(dāng)前的plupload實(shí)例對(duì)象，errObject為錯(cuò)誤對(duì)象，它至少包含以下3個(gè)屬性(因?yàn)椴煌?lèi)型的錯(cuò)誤，屬性可能會(huì)不同)： code：錯(cuò)誤代碼，具體請(qǐng)參考plupload上定義的表示錯(cuò)誤代碼的常量屬性 file：與該錯(cuò)誤相關(guān)的文件對(duì)象 message：錯(cuò)誤信息 |
| 當(dāng)調(diào)用destroy方法時(shí)觸發(fā) 監(jiān)聽(tīng)函數(shù)參數(shù)：(uploader) uploader為當(dāng)前的plupload實(shí)例對(duì)象 |
三、Plupload實(shí)例的屬性
| Plupload實(shí)例的唯一標(biāo)識(shí)id |
| 當(dāng)前的上傳狀態(tài)，可能的值為plupload.STARTED或plupload.STOPPED，該值由Plupload實(shí)例的stop()或statr()方法控制。默認(rèn)為plupload.STOPPED |
| 當(dāng)前使用的上傳方式 |
| 當(dāng)前的上傳隊(duì)列，是一個(gè)由上傳隊(duì)列中的文件對(duì)象組成的數(shù)組 |
| 當(dāng)前的配置參數(shù)對(duì)象 |
| 表示總體進(jìn)度信息的QueueProgress對(duì)象 |
四、Plupload實(shí)例的方法
| 初始化Plupload實(shí)例 |
| 設(shè)置某個(gè)特定的配置參數(shù),option為參數(shù)名稱(chēng)，value為要設(shè)置的參數(shù)值。option也可以為一個(gè)由參數(shù)名和參數(shù)值鍵/值對(duì)組成的對(duì)象，這樣就可以一次設(shè)定多個(gè)參數(shù)，此時(shí)該方法的第二個(gè)參數(shù)value會(huì)被忽略。 |
| 獲取當(dāng)前的配置參數(shù)，參數(shù)option為需要獲取的配置參數(shù)名稱(chēng)，如果沒(méi)有指定option，則會(huì)獲取所有的配置參數(shù) |
| 刷新當(dāng)前的plupload實(shí)例，暫時(shí)還不明白什么時(shí)候需要使用 |
| 開(kāi)始上傳隊(duì)列中的文件 |
| 停止隊(duì)列中的文件上傳 |
| 禁用或啟用plupload的文件瀏覽按鈕,參數(shù)disable為true時(shí)為禁用，為false時(shí)為啟用。默認(rèn)為true |
| 通過(guò)id來(lái)獲取文件對(duì)象 |
| 向上傳隊(duì)列中添加文件，如果成功添加了文件，會(huì)觸發(fā)FilesAdded事件。參數(shù)file為要添加的文件,可以是一個(gè)原生的文件,或者一個(gè)plupload文件對(duì)象,或者一個(gè)input[type="file"]元素,還可以是一個(gè)包括前面那幾種東西的數(shù)組；fileName為給該文件指定的名稱(chēng) |
| 從上傳隊(duì)列中移除文件，參數(shù)file為plupload文件對(duì)象或先前指定的文件名稱(chēng) |
| 從上傳隊(duì)列中移除一部分文件，start為開(kāi)始移除文件在隊(duì)列中的索引，length為要移除的文件的數(shù)量，該方法的返回值為被移除的文件。該方法會(huì)觸發(fā)FilesRemoved?和QueueChanged事件 |
| 觸發(fā)某個(gè)事件。name為要觸發(fā)的事件名稱(chēng)，Multiple為傳給該事件監(jiān)聽(tīng)函數(shù)的參數(shù)，是一個(gè)對(duì)象 |
| 用來(lái)判斷某個(gè)事件是否有監(jiān)聽(tīng)函數(shù)，name為事件名稱(chēng) |
| 給某個(gè)事件綁定監(jiān)聽(tīng)函數(shù)，name為事件名，func為監(jiān)聽(tīng)函數(shù)，scope為監(jiān)聽(tīng)函數(shù)的作用域，也就是監(jiān)聽(tīng)函數(shù)中this的指向 |
| 移除事件的監(jiān)聽(tīng)函數(shù)，name為事件名稱(chēng)，func為要移除的監(jiān)聽(tīng)函數(shù) |
| 移除所有事件的所有監(jiān)聽(tīng)函數(shù) |
| 銷(xiāo)毀plupload實(shí)例 |
五、文件對(duì)象的屬性和方法
在很多事件監(jiān)聽(tīng)函數(shù)中，都會(huì)提供文件對(duì)象給你
| 文件id |
| 文件名，例如"myfile.gif" |
| 文件類(lèi)型，例如"image/jpeg" |
| 文件大小，單位為字節(jié)，當(dāng)啟用了客戶(hù)端壓縮功能后，該值可能會(huì)改變 |
| 文件的原始大小，單位為字節(jié) |
| 文件已上傳部分的大小，單位為字節(jié) |
| 文件已上傳部分所占的百分比，如50就代表已上傳了50% |
| 文件的狀態(tài)，可能為以下幾個(gè)值之一：plupload.QUEUED,?plupload.UPLOADING,?plupload.FAILED,?plupload.DONE |
| 文件最后修改的時(shí)間 |
| 獲取原生的文件對(duì)象 |
| 獲取mOxie.File 對(duì)象，想了解mOxie是什么東西，可以看下https://github.com/moxiecode/moxie/wiki/API |
| 銷(xiāo)毀文件對(duì)象 |
六、QueueProgress 對(duì)象的屬性
plupload實(shí)例的total屬性是一個(gè)QueueProgress對(duì)象
| 上傳隊(duì)列中所有文件加起來(lái)的總大小，單位為字節(jié) |
| 隊(duì)列中當(dāng)前已上傳文件加起來(lái)的總大小,單位為字節(jié) |
| 已完成上傳的文件的數(shù)量 |
| 上傳失敗的文件數(shù)量 |
| 隊(duì)列中剩下的(也就是除開(kāi)已經(jīng)完成上傳的文件)需要上傳的文件數(shù)量 |
| 整個(gè)隊(duì)列的已上傳百分比，如50就代表50% |
| 上傳速率，單位為 byte/s，也就是 字節(jié)/秒 |
七、plupload命名空間上的一些屬性
plupload的命名空間上有一些屬性，用來(lái)表示一些常量。記住，不是plupload實(shí)例的屬性，而是plupload的屬性
| 當(dāng)前plupload的版本號(hào) |
| 值為1，代表上傳隊(duì)列還未開(kāi)始上傳或者上傳隊(duì)列中的文件已經(jīng)上傳完畢時(shí)plupload實(shí)例的state屬性值 |
| 值為2，代表隊(duì)列中的文件正在上傳時(shí)plupload實(shí)例的state屬性值 |
| 值為1，代表某個(gè)文件已經(jīng)被添加進(jìn)隊(duì)列等待上傳時(shí)該文件對(duì)象的status屬性值 |
| 值為2，代表某個(gè)文件正在上傳時(shí)該文件對(duì)象的status屬性值 |
| 值為4，代表某個(gè)文件上傳失敗后該文件對(duì)象的status屬性值 |
| 值為5，代表某個(gè)文件上傳成功后該文件對(duì)象的status屬性值 |
| 值為-100，發(fā)生通用錯(cuò)誤時(shí)的錯(cuò)誤代碼 |
| 值為-200，發(fā)生http網(wǎng)絡(luò)錯(cuò)誤時(shí)的錯(cuò)誤代碼，例如服務(wù)氣端返回的狀態(tài)碼不是200 |
| 值為-300，發(fā)生磁盤(pán)讀寫(xiě)錯(cuò)誤時(shí)的錯(cuò)誤代碼，例如本地上某個(gè)文件不可讀 |
| 值為-400，發(fā)生因?yàn)榘踩珕?wèn)題而產(chǎn)生的錯(cuò)誤時(shí)的錯(cuò)誤代碼 |
| 值為-500，初始化時(shí)發(fā)生錯(cuò)誤的錯(cuò)誤代碼 |
| 值為-600，當(dāng)選擇的文件太大時(shí)的錯(cuò)誤代碼 |
| 值為-601，當(dāng)選擇的文件類(lèi)型不符合要求時(shí)的錯(cuò)誤代碼 |
| 值為-602，當(dāng)選取了重復(fù)的文件而配置中又不允許有重復(fù)文件時(shí)的錯(cuò)誤代碼 |
| 值為-700，發(fā)生圖片格式錯(cuò)誤時(shí)的錯(cuò)誤代碼 |
| 當(dāng)發(fā)生內(nèi)存錯(cuò)誤時(shí)的錯(cuò)誤代碼 |
| 值為-702，當(dāng)文件大小超過(guò)了plupload所能處理的最大值時(shí)的錯(cuò)誤代碼 |
?
綁定相關(guān)事件
uploader.bind('UploadProgress', function(up, file) { $(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%"; });
?
?
?
?
?
轉(zhuǎn)載于:https://my.oschina.net/xwzj/blog/818421
總結(jié)
以上是生活随笔為你收集整理的ajax上传plupload的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： C#学习笔记——读写ini文件
- 下一篇： 第三方提权之serv-u提权