plupload怎么设置属性_jquery上传插件：plupload事件参数说明详解
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事件参数说明详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 物联网 FOTA升级的必要性
- 下一篇： Git从入门到入土