1.简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
2.引入资源：使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。
<!--引入CSS--> <link type="text/css" href="https://www.jb51.net/webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="https://www.jb51.net/webuploader文件夹/webuploader.js"></script> <!--SWF在初始化的时候指定，在后面将展示-->
3.HTML部分
<div> <!--用来存放文件信息--> <ul></ul> <div></div> <div> <div>选择文件</div> <input type="button" value="开始上传" /> </div> </div>
4.JS部分
//初始化上传控件 function initUpload() { var $ = jQuery; var $list = $('#thelist'); var uploader = WebUploader.create({ // 选完文件后，是否自动上传。 auto: false, // swf文件路径 swf: applicationPath + '../Content/scripts/plugins/webuploader/Uploader.swf', // 文件接收服务端。 server: applicationPath + 'PublicInfoManage/Upload/Upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#picker', chunked: true,//开始分片上传 chunkSize: 2048000,//每一片的大小 formData: { guid: GUID //自定义参数，待会儿解释 }, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false }); // 当有文件被添加进队列的时候 uploader.on('fileQueued', function (file) { $list.append('<li>' + '<span dataValue="">' + file.name + '</span>' + '<span style=https://www.jb51.net/article/\" margin-left: 10px;\">等待上传</span>' + '<span dataValue="0" style=https://www.jb51.net/article/\" margin-left: 10px;display: none;\"></span>' + '<span></span>' + '<spanstyle=https://www.jb51.net/article/\"float: right;display: none; \">删除<span>' + '</li>'); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if (!$percent.length) { $percent = $('<div>' + '<div role="progressbar">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('span.state').text('上传中'); $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file, response) { var $li = $('#' + file.id); //$('#' + file.id).find('p.state').text('已上传'); $.post('../../PublicInfoManage/Upload/Merge', { guid: GUID, fileName: file.name }, function (data) { $li.find('span.state').html("上传成功"); $li.find('span.filepath').attr("dataValue", 1); $li.find('span.fileName').attr("dataValue", data.filename); $li.find('span.fileName').html(data.filename); $li.find('span.download').html("<a href=https://www.jb51.net/article/\"../../PublicInfoManage/Upload/DownFile?filePath=" + data.filepath + "&fileName=" + data.filename + "https://www.jb51.net/article/\">下载</a>") $li.find('span.webuploadDelbtn').show(); $li.find('span.filepath').html(data.filepath); //增加列表存储 files.push(data); }); }); // 文件上传失败，显示上传出错。 uploader.on('uploadError', function (file, reason) { $('#' + file.id).find('p.state').text(reason); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').fadeOut(); }); //所有文件上传完毕 uploader.on("uploadFinished", function () { //提交表单 }); //开始上传 $("#ctlBtn").click(function () { uploader.upload(); }); //删除 $list.on("click", ".webuploadDelbtn", function () { debugger var $ele = $(this); var id = $ele.parent().attr("id"); var file = uploader.getFile(id); uploader.removeFile(file); $ele.parent().remove(); //移除数组 var destFile = findFile(file.name) var index = files.indexOf(destFile); if (index > -1) { files.splice(index, 1); } }); }
5.C# Controller后台处理
/// <summary> /// 上传文件 /// </summary> /// <returns></returns> [HttpPost] public ActionResult Upload() { string fileName = Request["name"]; int lastIndex = fileName.LastIndexOf('.'); string fileRelName = lastIndex == -1? fileName: fileName.Substring(0, fileName.LastIndexOf('.')); fileRelName = fileRelName.Replace("[", "").Replace("]", "").Replace("{", "").Replace("}", "").Replace(",", ""); int index = Convert.ToInt32(Request["chunk"]);//当前分块序号 var guid = Request["guid"];//前端传来的GUID号 var dir = Server.MapPath("~/Upload/file");//文件上传目录 string currentTime = DateTime.Now.ToString("yyyy-MM-dd"); dir += "\\" + currentTime; dir = Path.Combine(dir, fileRelName);//临时保存分块的目录 if (!System.IO.Directory.Exists(dir)) System.IO.Directory.CreateDirectory(dir); string filePath = Path.Combine(dir, index.ToString());//分块文件名为索引名，更严谨一些可以加上是否存在的判断，防止多线程时并发冲突 var data = Request.Files["file"];//表单中取得分块文件 //if (data != null)//为null可能是暂停的那一瞬间 //{ data.SaveAs(filePath);//报错 //} return Json(new { erron = 0 });//Demo，随便返回了个值，请勿参考 }
6.实现效果
