Asp.net使用Plupload上传组件详解

　　每天上班在地铁上都有看今日头条的习惯，偶然的一次机会看到了关于Plupload的一篇文章，今日头条真是包罗万象啊。

　　首先来了解一下Plupload的功能和特点：

拥有多种呈现方式，如HTML5、Silverlight、Flash以及普通的<input type=”file”/>，Plupload会根据当前的浏览器选择合适的呈现方式；

支持以拖拽的方式选择文件；

支持前端压缩照片，即文件上传前就对图片进行压缩

支持分片上传，可以将一个大文件分割成多部分上传

　　接下来我们看如何使用

　　前端代码：　　

<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<div id="upload_p">
<button id="browse">选择文件</button>
<button id="start_upload">开始上传</button>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/plupload/plupload.full.min.js"></script>
<script>
　　//文件类型过滤器
plupload.addFileFilter('file_types', function (fileTypes, file, cb) {
　　var undef;
　　// 验证文件类型
if (file.name !== undef) {
　　var nameArray = file.name.split(".");
　　var fileExt = ".";
if (nameArray.length > 1) {
　　fileExt += nameArray[1].toLowerCase();
}
if (fileTypes.indexOf(fileExt) === -1) {
　　this.trigger('Error', {
　　code: plupload.FILE_EXTENSION_ERROR,
　　message: plupload.translate('File extension error.'),
　　file: file
　　　　　　　 });
cb(false);
} else {
cb(true);
}
} else {
　　cb(true);
}
　　});
//实例化一个plupload上传对象
var uploader = new plupload.Uploader({
　　　　browse_button: 'browse', //触发文件选择对话框的按钮，为那个元素id
　　　　url: 'upload.ashx', //服务器端的上传页面地址
　　　　flash_swf_url: 'Script/plupload/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
　　　　silverlight_xap_url: 'Script/plupload/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
　　　　chunk_size: "2mb",  //分片大小，0为不分片
　　　　unique_names: true, //是否生成唯一文件名
　　　　multi_selection: true,//是否多选
　　　　file_data_name: "file", //上传文件域的名称
　　　　filters: {
　　　　　　//文件限制
//mime_types: [ //只允许上传图片和zip文件
//   { title: "Image files", extensions: "jpg,gif,png" },
//   { title: "Zip files", extensions: "zip" },
//   { title: "Excel files", extensions: "xlsx,xls" }
//],
　　max_file_size: '400kb', //最大只能上传400kb的文件
file_types: ['.jpg', '.chm'],//自定义的文件类型设置
prevent_duplicates: true //不允许选取重复文件
},
init: {
　　PostInit: function () {
　　　　　　　　//组件初始化完成
　　　　document.getElementById('filelist').innerHTML = '';
　　　　$("#start_upload").click(function () {
　　　　　　uploader.start();
　　　　　　return false;
　　　　})
　 },
FilesAdded: function (up, files) {
　　plupload.each(files, function (file) {
　　document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
　　});
},
BeforeUpload: function (up, file) {
　　uploader.setOption("multipart_params", { username: $("#username").val() })
},
UploadProgress: function (up, file) {
　　document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
FileUploaded: function (up, file, responseObject) {
　　//某个文件上传完成时触发，可以在此处处理相关逻辑
console.log("文件上传成功，服务器返回：");
console.log(responseObject.response);
},
ChunkUploaded: function (up, file, responseObject) {
　　//使用分片时某个片上传完成时触发
console.info(responseObject);
},
UploadComplete: function (up, files) {
　　//文件全部上传完成时
plupload.each(files, function (file) {
　　console.info(file.id);
});
},
Error: function (up, error) {
　　if (error.code === plupload.FILE_SIZE_ERROR) {
　　alert("超过文件大小");
}
else if (error.code === plupload.FILE_EXTENSION_ERROR) {
　　alert("格式不允许");
}
}
　　　　　}
　　});
//初始化上传组件
uploader.init();
</script>

　　后台代码upload.ashx如下：

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
HttpPostedFile file = context.Request.Files["file"];
string name = context.Request.Form["name"]; //文件名一定从Request.Form["name"]中获取，因为在分片的时候file.FileName的值是不正确的
int chunk = Convert.ToInt32(context.Request.Form["chunk"]); //当前分片
int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//分片数
string uploadPath = context.Server.MapPath("~/upload");
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
string filePath = Path.Combine(uploadPath, name);　　
FileStream fs = new FileStream(filePath, chunk == 0 ? FileMode.OpenOrCreate : FileMode.Append);
Stream inputStream = file.InputStream;
byte[] buffer = new byte[inputStream.Length];
inputStream.Read(buffer, 0, buffer.Length);
fs.Write(buffer, 0, buffer.Length);
fs.Close();
context.Response.Write("{\"success\":true}");
}

在前端页面的代码中，我自定义了一个file_types的文件类型的过滤属性，在Plupload的官方文档中已经有定义了关于文件类型的filters.mime_types属性，但是用组件中本身提供的过滤属性，在选择文件的时候，文件对话框会打开很慢。更多使用方法，请到官网http://www.plupload.com/中查看