webuploader 快速应用（C#）

百度的WebUploader前端插件作为目前比较好用且免费的附件上传工具，利用了断点续传特点实现了大文件上传功能，其更好的兼容性与界面效果完全可以替换掉IE的activex 上传控件。许多人或许还不知道怎么使用，下面的详细介绍可帮助开发者快速使用。

webuploader 官方下载地址：https://fex.baidu.com/webuploader/download.html

用vs新建项目WebUploaderDemo

引入webuploader

编写一般处理程序代码

     /// <summary>
     /// Upload 的摘要说明
     /// </summary>
     public class Upload : IHttpHandler
     {
         const string path = "/upfiles/";//上传目录
         const string tempPath = "/upfiles/temp/";//上传临时目录

         public void ProcessRequest(HttpContext context)
         {
             context.Response.ContentType = "text/plain";
             //如果进行了分片
             if (context.Request.Form.AllKeys.Any(m => m == "chunk"))
             {
                 //取得chunk和chunks
                 int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//当前分片在上传分片中的顺序（从0开始）
                 int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//总分片数

                 if (string.IsNullOrEmpty(context.Request["guid"]))
                     throw new Exception("[guid]不能为空");

                 //根据GUID创建用该GUID命名的临时文件夹
                 string folder = context.Server.MapPath(tempPath + context.Request["guid"] + "/");
                 string tempFile = folder + chunk;

                 //建立临时传输文件夹
                 if (!Directory.Exists(Path.GetDirectoryName(folder)))
                 {
                     Directory.CreateDirectory(folder);
                 }

                 FileStream addFile = new FileStream(tempFile, FileMode.Append, FileAccess.Write);
                 BinaryWriter AddWriter = new BinaryWriter(addFile);
                 //获得上传的分片数据流
                 HttpPostedFile file = context.Request.Files[];
                 Stream stream = file.InputStream;

                 BinaryReader TempReader = new BinaryReader(stream);
                 //将上传的分片追加到临时文件末尾
                 AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
                 //关闭BinaryReader文件阅读器
                 TempReader.Close();
                 stream.Close();
                 AddWriter.Close();
                 addFile.Close();

                 TempReader.Dispose();
                 stream.Dispose();
                 AddWriter.Dispose();
                 addFile.Dispose();
                 string filePath = "";
                 if (chunk == chunks - )
                 {
                     filePath = path + DateTime.Now.ToString("yyyy/MM/") + Guid.NewGuid() + Path.GetExtension(file.FileName);//合并后的文件
                     ProcessRequest(folder, context.Server.MapPath(filePath));
                 }
                 context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"filePath\" : \"" + filePath + "\"}");
             }
             else//没有分片直接保存
             {
                 string filePath = path + DateTime.Now.ToString("yyyy/MM/") + Guid.NewGuid() + Path.GetExtension(context.Request.Files[].FileName);//合并后的文件
                 context.Request.Files[].SaveAs(context.Server.MapPath(filePath));
                 context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"filePath\" : \"" + filePath + "\"}");
             }
         }
         /// <summary>
         /// 合并文件
         /// </summary>
         /// <param name="sourcePath">源数据文件夹</param>
         /// <param name="filePath">合并后的文件</param>
         private void ProcessRequest(string sourcePath, string filePath)
         {
             if (!Directory.Exists(Path.GetDirectoryName(filePath)))
             {
                 Directory.CreateDirectory(Path.GetDirectoryName(filePath));
             }
             DirectoryInfo dicInfo = new DirectoryInfo(sourcePath);
             if (Directory.Exists(Path.GetDirectoryName(sourcePath)))
             {
                 FileInfo[] files = dicInfo.GetFiles();
                 foreach (FileInfo file in files.OrderBy(f => int.Parse(f.Name)))
                 {
                     FileStream addFile = new FileStream(filePath, FileMode.Append, FileAccess.Write);
                     BinaryWriter AddWriter = new BinaryWriter(addFile);

                     //获得上传的分片数据流
                     Stream stream = file.Open(FileMode.Open);
                     BinaryReader TempReader = new BinaryReader(stream);
                     //将上传的分片追加到临时文件末尾
                     AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
                     //关闭BinaryReader文件阅读器
                     TempReader.Close();
                     stream.Close();
                     AddWriter.Close();
                     addFile.Close();

                     TempReader.Dispose();
                     stream.Dispose();
                     AddWriter.Dispose();
                     addFile.Dispose();
                 }
                 Directory.Delete(sourcePath, true);
             }
         }

         /// <summary>
         /// 删除文件夹
         /// </summary>
         /// <param name="strPath"></param>
         private static void DeleteFolder(string strPath)
         {
             if (Directory.GetDirectories(strPath).Length > )
             {
                 foreach (string fl in Directory.GetDirectories(strPath))
                 {
                     Directory.Delete(fl, true);
                 }
             }
             //删除这个目录下的所有文件
             if (Directory.GetFiles(strPath).Length > )
             {
                 foreach (string f in Directory.GetFiles(strPath))
                 {
                     System.IO.File.Delete(f);
                 }
             }
         }

编写前端代码

 <div id="uploadfile" class="updown">
         <div class="title">
             <label>上传</label>
         </div>
         <div id="uploader" class="wu-example">
             <div class="btns">
                 <div id="pickerfile">选择文件</div>
                 <button id="ctlBtnUp" class="btn-default">开始上传</button>
             </div>            <!--用来存放文件信息-->
             <div id="thelistupload" class="uploader-list"></div>
         </div>
     </div>
     <script type="text/javascript">
         var uploadindex = 0;
         function UploadInit() {
             uploadindex = 1;
             var GUID = WebUploader.Base.guid(); //当前页面是生成的GUID作为标示
             var $list = $("#thelistupload");
             var uploader = WebUploader.create({

                 // swf文件路径
                 swf: '/plugins/webuploader-0.1.5/Uploader.swf',

                 // 文件接收服务端。
                 server: "/ashx/Upload.ashx",

                 // 选择文件的按钮。可选。
                 // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                 pick: '#pickerfile',
                 formData: { guid: GUID },
                 // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                 resize: false,
                 //切片
                 chunked: true,
                 //每片的大小，C#接收文件也有默认大小，也可以自己在C#中修改
                 chunkSize: 2 * 1024 * 1024,
                 threads: 1,
                 accept: {
                     title: 'File',
                     extensions: '*',
                     mimeTypes: '*'
                 }
             });
             // 当有文件被添加进队列的时候
             uploader.on('fileQueued', function (file) {
                 console.log(file);
                 $list.append('<div id="' + file.id + '" class="item">' +
                     '<h4 class="info">' + file.name + '（' + getfilesize(file.size) + '）</h4>' +
                     '<p class="state">等待上传...</p>' +
                     '</div>');

             });
             uploader.on('beforeFileQueued', function (file) {
                 $list.empty();
                 uploader.reset();
             });
             // 文件上传过程中创建进度条实时显示。
             uploader.on('uploadProgress', function (file, percentage) {
                 var $li = $('#' + file.id);
                 $li.find('p.state').text('上传中（' + (percentage * 100).toFixed(2) + '%）');
             });
             uploader.on('uploadSuccess', function (file) {
                 console.log("uploadSuccess:");
                 console.log(file);
                 $('#' + file.id).find('p.state').text('已上传');
             });

             uploader.on('uploadError', function (file, code) {
                 $('#' + file.id).find('p.state').text('上传出错');
             });

             uploader.on('uploadComplete', function (file) {
                 $('#' + file.id).find('.progress').fadeOut();
             });

             uploader.on('uploadAccept', function (file, response) {
                 console.log("uploadAccept:");
                 console.log(file);
                 console.log(response);
                 if (response['hasError'] != false) {
                     // 通过return false来告诉组件，此文件上传有错。

                     return false;
                 }
                 else {
                     return true;
                 }
             });
             $("#ctlBtnUp").on('click', function () {
                 uploader.upload();
             });
         }

         if (uploadindex === 0) {
             UploadInit();
         }

         // 计算文件大小函数(保留两位小数),Size为字节大小
         // size：初始文件大小
         function getfilesize(size) {
             if (!size)
                 return "";

             var num = 1024.00; //byte
             if (size < num)
                 return size + "B";
             if (size < Math.pow(num, 2))
                 return (size / num).toFixed(2) + "K"; //kb
             if (size < Math.pow(num, 3))
                 return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
             if (size < Math.pow(num, 4))
                 return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
             return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
         }

     </script>

最终效果：

demo下载地址：

链接：https://pan.baidu.com/s/1bSMK7EZ6cdJMDeHMuFkYBA
提取码：i4cn