Plupload功能强大的多文件批量上传插件

Plupload 是一个Web浏览器上的界面友好的文件上传模块，可显示上传进度、图像自动缩略和上传分块。可同时上传多个文件，为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。

Plupload功能强大的多文件批量上传插件

Plupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传。

Plupload还提供其它功能包括：上传进度提醒、图片缩小、多文件上传，拖拽文件 到上传控件，文件类型过滤和Chunked上传等。这些功能在不同的上传方式中支持情况会受到限制。

注意事项

分块上传chrome和firefox 4+ 支持。
拖拽适用于firefox和webkit内核的浏览器，windows版的safari还存在一些问题待解决。
图片缩放仅在firefox3.5+和chrome上支持，safari/opera 不支持直接数据访问选定的文件。
目前所有的浏览器不支持文件类型过滤。但是，我们填写HTML5的接受文件类型过滤属性，一旦有支持它会工作。
多文件上传仅支持gecko和webkit内核的浏览器。
使用方法

1、通过官方网站或者Github地址下载Plupload的源文件，解压到你的项目文件夹中。

2、在网页的头部引入插件必须的JavaScript文件

（不需要可以去掉）
（不需要可以去掉）
（不需要可以去掉，我项目中需要用）
（不需要可以去掉）
（不需要可以去掉）
（不需要可以去掉）

3、编写上传HTML代码，这里我们只使用最基本的HTML结构：一个选择文件的按钮，一个开始上传文件的按钮，有时候甚至该按钮也可以不要。

    选择文件
    开始上传

4、实例化一个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，提示上传进度等操作
});
//......
//......

//最后给"开始上传"按钮注册事件

document.getElementById('start_upload').onclick = function(){
    uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
}
multipart:false // 官网的解释是设置传递到后台服务中的数据流结构，false的时候使用正常的字节流，如果为true,则使用mutlipart格式，可能是为了实现大附件分段上传的功能

如 果设置了multipart:true,则你可以附加使用multipart_params参数去传递参数而不用像我这样通过在服务地址后面加参数。还有 一些其他的属性，诸如chunk_size，resize（该属性能压缩图片，所以该控件对图片上传很有好处，推荐使用）可以查看官网的文档。如果你想简 单的传递附件然后浏览，最好设置multipart:false，因为当你设置为true之后，你在后台中获取的流格式会有点问题，我本人的经验就是使用 了true上传了一个html文档到数据库后，用

Response.ContentType = "text/html";
Response.BinaryWrite(body);
Response.Flush();
Response.Close();
Response.End();

这种方式查看附件时，直接打开的HTML页面会掺杂一些未能解析的流信息。

//文件添加时，会在容器里显示待上传的文件列表

uploader.bind('FilesAdded',
function(up, files) {
 for (var i in files) {
  $('filelist').innerHTML += '
' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ')
';
 }
});

//文件上传的进度

uploader.bind('UploadProgress',
function(up, file) {
 $(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%";
});
//文件上传成功后的总计

uploader.bind('UploadComplete',
function(up, files) {
 $('filelist').innerHTML = "您选择的文件已经全部上传，总计共" + files.length + "个文件";
});

// 这是一个选择完成后的上传按钮。点击按钮后，附件才开始上传

$('ibtMultiSubmit').onclick = function() {
 uploader.start();
 return false;
};
uploader.init();

后台服务页面的代码：

网上有人使用这种方式：

Byte[] buffer = null;
if (Request.ContentType == "application/octet-stream" && Request.ContentLength > 0) {
 buffer = new Byte[Request.InputStream.Length];
 Request.InputStream.Read(buffer, 0, buffer.Length);
} else if (Request.ContentType.Contains("multipart/form-data") && Request.Files.Count > 0 && Request.Files[0].ContentLength > 0) {
 buffer = new Byte[Request.Files[0].InputStream.Length];
 Request.Files[0].InputStream.Read(buffer, 0, buffer.Length);
}

来获取附件内容，我基本也是借鉴他的，获取参数就使用Request.Params[“param1″]即可，获取到后，做自己的业务处理即可。

使用该控件时遇到的唯一问题就是multipart:为true和false时，获取的流不同。并且它貌似不像uploadify那样提供动态获取参数的功能，所以如果某些想要传递到后台的参数不是页面初始化时设定的，可以考虑变换方式，比如在设置好参数的时候，触发事件再次初始化控件即可。该控件除了对 IE6不支持，其他浏览器都支持得挺好。

filters: {   mime_types : [ //只允许上传图片和zip文件     { title : "Image files", extensions : "jpg,gif,png" },      { title : "Zip files", extensions : "zip" }   ],   max_file_size : '400kb', //最大只能上传400kb的文件   prevent_duplicates : true //不允许选取重复文件 }

multipart_params: {   one: '1',   two: '2',   three: { //值还可以是一个字面量对象     a: '4',     b: '5'   },   four: ['6', '7', '8']  //也可以是一个数组 }

resize: {   width: 100,   height: 100,   crop: true,   quality: 60,   preserve_headers: false }