jquery上傳插件：plupload事件參數說明詳解

2018-12-01

本篇重點說明一下plupload的事件參數。并用2個例子說明一下綁定事件。

1、plupload參數說明：

Browse_button:觸發瀏覽文件按鈕標簽的唯一id,,在flash、html5、和silverlight中能找到觸發事件的源(我理解的，這個參數在隊列部件不需要參見)

Container: 展現上傳文件列表的容器，[默認是body]

chunk_size：當上傳文件大于服務器接收端文件大小限制的時候，可以分多次請求發給服務器，如果不需要從設置中移出

drop_element：當瀏覽器支持拖拽的情況下，能夠文件拖放到你想要的容器ID里

file_data_name：設置上傳字段的名稱。默認情況下被設置為文件。(我試驗了沒找到該如何使用它，暫且不提)

filters:選擇文件擴展名的過濾器,每個過濾規則中只有title和ext兩項[{title:"", extensions:""}]

flash_swf_url:flash文件地址

headers：自定義的插入http請求的鍵值對

max_file_size：最大上傳文件大小(格式100b, 10kb, 10mb, 1gb)

multipart：布爾值，如果用mutlipart 代替二進制流的方式，在webkit下無法工作

multipart_params： 跟 multipart關聯在一起的鍵值

multi_selection： 多選對話框

resize：修改圖片屬性 resize: {width: 320, height: 240, quality: 90}

runtimes:上傳插件初始化選用那種方式的優先級順序，如果第一個初始化失敗就走第二個，依次類推

required_features：需要那些特性，才能初始化插件

url：上傳服務器地址

unique_names：是否生成唯一的文件名，避免與服務器文件重名

urlstream_upload：布爾值 如果是flash上傳應該用URLStream 代替FileReference.upload

pluload API文檔

方法列表

方法列表：

Uploader(setting)：創建實例的構造方法

bind(event, function[, scope])：綁定事件

destroy()：銷毀plupload的實例對象

uploader.destroy()

getFile(id): 獲取上傳文件信息

init:初始化plupload實例，添加監聽對象

uploader.destroy()

refresh：重新實例化uploader

removeFile(id):從file中移除某個文件

splice(start,length)：從隊列中start開始刪除length個文件， 返回被刪除的文件列表

start() 開始上傳

stop()停止上傳

unbind(name, function): 接觸事件綁定

unbindAll()解綁所有事件

屬性集合

features：uploader中包含那些特性

files:當前隊列中的文件列表

id：uploader實例的唯一id

runtime：當前運行環境(是html5、flash等等)

state:當前上傳進度狀態

total：當前上傳文件的信息集合

事件集合

BeforeUpload(up, file)：文件上傳完之前觸發的事件

ChunkUploaded(up, file,response)文件被分塊上傳的事件

Destroy(up):uploader的destroy調用的方法

Error(up, err)：上傳出錯的時候觸發

Fileadded(up, files):用戶選擇文件時觸發

FileRemoved(up, files):當文件從上傳隊列中移除觸發

FileUploaded(up, file, res):文件上傳成功的時候觸發

Init(up):當初始化的時候觸發

PostInit(up):init執行完以后要執行的事件觸發

QueueChanged(up):當文件隊列變化時觸發

Refresh(up):當silverlight/flash或是其他運行環境需要移動的時候觸發

StateChanged(up)當整個上傳隊列被改變的時候觸發

UploadComplete(up,file)當隊列中所有文件被上傳完時觸發

UploadFile(up,file)當一個文件被上傳的時候觸發

UploadProgress(up,file):當文件正在被上傳中觸發

2、事件綁定的方法：

第一種：在標簽中直接生成此插件

$("#uploader").plupload({

runtimes: "gears,flash,silverlight,browserplus,html5",

url: "uploadFiles.ashx", // 服務端上傳路徑

max_file_size: "500mb", // 文件上傳最大限制。

chunk_size: "1mb", // 上傳分塊每塊的大小，這個值小于服務器最大上傳限制的值即可。

unique_names: true, // 上傳的文件名是否唯一

//直接在標簽中初始化插件，，開始

init: {

QueueChanged: function (up)

{

//這是一個文件列表變更事件；些處寫事件處理方法；

},//直接在標簽中初始化插件，，結束

是否生成縮略圖(僅對圖片文件有效)

//resize: { width: 320, height: 240, quality: 90 },

這個數組是選擇器，就是上傳文件時限制的上傳文件類型

filters: [{ title: "All files", extensions: "mp3,s48" }

],

// Flash文件 的所在路徑

flash_swf_url: "/js/Moxie.swf",

// silverlight文件所在路徑

silverlight_xap_url: "/js/Moxie.xap"

});

第二種方法：

//實例化一個plupload上傳對象

var uploader = new plupload.Uploader({

browse_button : "browse", //觸發文件選擇對話框的按鈕，為那個元素id

url : "upload.php", //服務器端的上傳頁面地址

flash_swf_url : "js/Moxie.swf", //swf文件，當需要使用swf方式進行上傳時需要配置該參數

silverlight_xap_url : "js/Moxie.xap" //silverlight文件，當需要使用silverlight方式進行上傳時需要配置該參數

});

//在實例對象上調用init()方法進行初始化

uploader.init();

//綁定各種事件，并在事件監聽函數中做你想做的事

uploader.bind("FilesAdded",function(uploader,files){

//每個事件監聽函數都會傳入一些很有用的參數，

//我們可以利用這些參數提供的信息來做比如更新UI，提示上傳進度等操作

});

uploader.bind("UploadProgress",function(uploader,file){

//每個事件監聽函數都會傳入一些很有用的參數，

//我們可以利用這些參數提供的信息來做比如更新UI，提示上傳進度等操作

});

必須要注意的是只能在初始化后才可以綁定事件!!

3、限制文件上傳數量

上傳時限制文件個數

upload.bind("FilesAdded",function(up, files){

$.each(files,function(i,file){

if(up.files.length > 1){

up.removeFile(file);

}

});

});

4、上傳成功事件

上傳成功后：

upload.bind("UploadComplete", function(up, file, res) {

$("#basicModal").attr("class","modal fade");

$("#basicModal").css("display","none");

$(".modal-backdrop").remove();

// 上傳回調函數

jQuery("#updateSync").click();

});

});

5、開始上傳事件：

jQuery("#cookie").click(function(){

var valm = $("#basicModal").attr("class");

var sty = $("#basicModal").css("display");

if(valm == "modal fade" | sty =="none;"){

$("#basicModal").attr("class","modal fade in");

$("#basicModal").css("display","block");

}else{

$("#basicModal").attr("class","modal fade");

$("#basicModal").css("display","none");

}

plupload();

var upload = $("#upload").pluploadQueue();

發現沒有一個參數是配置2個文件一次提交。也就是說我想通過一個post發送2個文件是不行。除非是不用這個插件，使用asp.net自帶的input type=file的方式一次性提交form表單。因為C#是支持一次post請求發送多個文件的。大家有興趣可以去看看：HttpFileCollection myfiles = HttpContext.Current.Request.Files;

其中，我在嘗試時候，發現2個Plupload 之間可以通過Plupload? 的事件做一些事情。

var uploader;//第一個Plupload

var uploaderbig;//第二個Plupload

比如：監聽文件添加成功事件。FilesAdded

//綁定文件添加進隊列事件

uploaderbig.bind("FilesAdded", function (uploaderbig, files) {

for (var i = 0, len = files.length; i < len; i++) {

var file_name = files[i].name; //文件名

var html = "

"

+ file_name + "

";

$("#imageListtempbig").html(html);

!function (i) {

previewImage(files[i], function (imgsrc) {

$("#file-" + files[i].id).append("");

})

}(i);

}

});

當第一個Plupload? 添加文件后，可以同時加到第二個Plupload? 的files隊列中：

//var files = uploader.files;

//??? for (var i = 0, len = files.length; i < len; i++) {

//??????? uploaderbig.addFile(files[i]);

//??? }

調用的事件是：addFile

當然，即使有這樣的功能也無法滿足我這邊的需求。所以只有最好一個辦法就是uploader在添加文件后，直接開始上傳事件，上傳成功返回服務器的地址。

js：

LoadUpplug(); uploader.init(); //初始化

//綁定文件添加進隊列事件

uploader.bind("FilesAdded", function (uploader, files) {

Upsmallimage();

for (var i = 0, len = files.length; i < len; i++) {

var file_name = files[i].name; //文件名

var html = "

"

+ file_name + "

";

$("#imageListtemp").html(html);

!function (i) {

previewImage(files[i], function (imgsrc) {

$("#file-" + files[i].id).append("");

})

}(i);

}

});

///開始上傳。

function Upsmallimage() {

var data;

data = {

Operate: "upsmallimage"

};

uploader.setOption("multipart_params", data);

uploader.start();

}

C#服務器端讀取文件并保存：

private object GetUpsmallimage()

{

//先臨時保存到temp下面，如果一起提交的成功的話，則從temp刪除，拿到Media

string filepath =HttpContext.Current.Server.MapPath ("/Upload/Media/");

string websiteurl = Utility.GetAppSettings("ImageWebSite");

//HttpContext.Current.Server.MapPath("/Upload/Media/");

HttpFileCollection files = HttpContext.Current.Request.Files;

int count = files.Count;

HttpPostedFile file = files[0];

string fileName = Guid.NewGuid().ToString() + Path.GetFileName(file.FileName);

try

{

string severlocalpath = filepath + fileName;

file.SaveAs(severlocalpath);

}

catch (Exception xe)

{

fileName = "" ;

}

return fileName;

}

有更好的辦法，請告知一聲。

免責聲明：本文僅代表文章作者的個人觀點，與本站無關。其原創性、真實性以及文中陳述文字和內容未經本站證實，對本文以及其中全部或者部分內容文字的真實性、完整性和原創性本站不作任何保證或承諾，請讀者僅作參考，并自行核實相關內容。

http://www.pinlue.com/style/images/nopic.gif

總結

以上是生活随笔為你收集整理的plupload怎么设置属性_jquery上传插件：plupload事件参数说明详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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