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