1、首先加载
<link rel="stylesheet" type="text/css" href="~/Content/scripts/plugins/webuploader/webuploader.css">
<script type="text/javascript" src="~/Content/scripts/plugins/webuploader/webuploader.js"></script>
2、在页面中放入DIV
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" />
</div>
</div>
3、初始化 WebUploader
<script> var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../"; var GUID = WebUploader.Base.guid();//一个GUID $(function () { var $ = jQuery; var $list = $('#thelist'); var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: false, // swf文件路径 swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf', // 文件接收服务端。 server: applicationPath + 'BusinesManage/KnowledgeBase/Upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker', chunked: true,//开始分片上传 chunkSize: 2048000,//每一片的大小 formData: { guid: GUID //自定义参数,待会儿解释 }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false }); // 当有文件被添加进队列的时候 uploader.on('fileQueued', function (file) { $list.append('<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>'); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if (!$percent.length) { $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style=" 0%">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file, response) { $('#' + file.id).find('p.state').text('已上传'); $.post('../../BusinesManage/KnowledgeBase/Merge', { guid: GUID, fileName: file.name }, function (data) { $("#uploader .state").html("上传成功..."); }); }); // 文件上传失败,显示上传出错。 uploader.on('uploadError', function (file) { $('#' + file.id).find('p.state').text('上传出错'); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); }); //所有文件上传完毕 uploader.on("uploadFinished", function () { //提交表单 }); //开始上传 $("#ctlBtn").click(function () { uploader.upload(); }); }); </script>
4、后台处理
1 #region 文件上传 2 [HttpPost] 3 public ActionResult Upload() 4 { 5 string fileName = Request["name"]; 6 string fileRelName = fileName.Substring(0,fileName.LastIndexOf('.'));//设置临时存放文件夹名称 7 int index = Convert.ToInt32(Request["chunk"]);//当前分块序号 8 var guid = Request["guid"];//前端传来的GUID号 9 var dir = Server.MapPath("~/Upload");//文件上传目录 10 dir = Path.Combine(dir, fileRelName);//临时保存分块的目录 11 if (!System.IO.Directory.Exists(dir)) 12 System.IO.Directory.CreateDirectory(dir); 13 string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名,更严谨一些可以加上是否存在的判断,防止多线程时并发冲突 14 var data = Request.Files["file"];//表单中取得分块文件 15 //if (data != null)//为null可能是暂停的那一瞬间 16 //{ 17 data.SaveAs(filePath);//报错 18 //} 19 return Json(new { erron = 0 });//Demo,随便返回了个值,请勿参考 20 } 21 public ActionResult Merge() 22 { 23 var guid = Request["guid"];//GUID 24 var uploadDir = Server.MapPath("~/Upload");//Upload 文件夹 25 var fileName = Request["fileName"];//文件名 26 string fileRelName = fileName.Substring(0, fileName.LastIndexOf('.')); 27 var dir = Path.Combine(uploadDir, fileRelName);//临时文件夹 28 var files = System.IO.Directory.GetFiles(dir);//获得下面的所有文件 29 var finalPath = Path.Combine(uploadDir, fileName);//最终的文件名(demo中保存的是它上传时候的文件名,实际操作肯定不能这样) 30 var fs = new FileStream(finalPath, FileMode.Create); 31 foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序,保证从0-N Write 32 { 33 var bytes = System.IO.File.ReadAllBytes(part); 34 fs.Write(bytes, 0, bytes.Length); 35 bytes = null; 36 System.IO.File.Delete(part);//删除分块 37 } 38 fs.Flush(); 39 fs.Close(); 40 System.IO.Directory.Delete(dir);//删除文件夹 41 return Json(new { error = 0 });//随便返回个值,实际中根据需要返回 42 } 43 #endregion