jquery上傳插件：plupload事件參數(shù)說明詳解

2018-12-01

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

1、plupload參數(shù)說明：

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

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

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

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

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

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

flash_swf_url:flash文件地址

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

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

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

multipart_params： 跟 multipart關(guān)聯(lián)在一起的鍵值

multi_selection： 多選對話框

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

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

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

url：上傳服務(wù)器地址

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

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

pluload API文檔

方法列表

方法列表：

Uploader(setting)：創(chuàng)建實例的構(gòu)造方法

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

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

uploader.destroy()

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

init:初始化plupload實例，添加監(jiān)聽對象

uploader.destroy()

refresh：重新實例化uploader

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

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

start() 開始上傳

stop()停止上傳

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

unbindAll()解綁所有事件

屬性集合

features：uploader中包含那些特性

files:當(dāng)前隊列中的文件列表

id：uploader實例的唯一id

runtime：當(dāng)前運行環(huán)境(是html5、flash等等)

state:當(dāng)前上傳進度狀態(tài)

total：當(dāng)前上傳文件的信息集合

事件集合

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

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

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

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

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

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

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

Init(up):當(dāng)初始化的時候觸發(fā)

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

QueueChanged(up):當(dāng)文件隊列變化時觸發(fā)

Refresh(up):當(dāng)silverlight/flash或是其他運行環(huán)境需要移動的時候觸發(fā)

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

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

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

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

2、事件綁定的方法：

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

$("#uploader").plupload({

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

url: "uploadFiles.ashx", // 服務(wù)端上傳路徑

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

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

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

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

init: {

QueueChanged: function (up)

{

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

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

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

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

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

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", //觸發(fā)文件選擇對話框的按鈕，為那個元素id

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

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

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

});

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

uploader.init();

//綁定各種事件，并在事件監(jiān)聽函數(shù)中做你想做的事

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

//每個事件監(jiān)聽函數(shù)都會傳入一些很有用的參數(shù)，

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

});

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

//每個事件監(jiān)聽函數(shù)都會傳入一些很有用的參數(shù)，

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

});

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

3、限制文件上傳數(shù)量

上傳時限制文件個數(shù)

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

// 上傳回調(diào)函數(shù)

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

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

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

var uploader;//第一個Plupload

var uploaderbig;//第二個Plupload

比如：監(jiān)聽文件添加成功事件。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);

}

});

當(dāng)?shù)谝粋€Plupload? 添加文件后，可以同時加到第二個Plupload? 的files隊列中：

//var files = uploader.files;

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

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

//??? }

調(diào)用的事件是：addFile

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

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#服務(wù)器端讀取文件并保存：

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;

}

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。