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

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

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

1. 拥有多种呈现方式，如HTML5、Silverlight、Flash以及普通的<input type=”file”/>，Plupload会根据当前的浏览器选择合适的呈现方式；
2. 支持以拖拽的方式选择文件；
3. 支持前端压缩照片，即文件上传前就对图片进行压缩
4. 支持分片上传，可以将一个大文件分割成多部分上传

　　接下来我们看如何使用

　　前端代码：　　

<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/中查看