第一步:
引入文件
<!--引入CSS-->
<link href="~/Content/JS/webuploader.css" rel="stylesheet" />
<!--引入JS-->
<script src="~/Content/JS/webuploader.js"></script>
第二步:
/
- /文本多个上传
- function UploadMultiFile() {
- var uploader = WebUploader.create({
- // 选完文件后,是否自动上传。
- auto: true,
- // swf文件路径
- swf: '~/Content/JS/Uploader.swf',
- // 文件接收服务端。
- server: '/Import/AllUpload',
- // 选择文件的按钮。可选。
- // 内部根据当前运行是创建,可能是input元素,也可能是flash.
- pick: '#picker',
- // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
- resize: false,
- fileVal:'fileData'
- });
- // 当有文件被添加进队列的时候
- uploader.on('fileQueued', function (file) {
- var itemTemplate = "";
- var fileSize = parseInt(file.size / 1024);
- if (fileSize >= 1024)
- fileSize = parseInt(fileSize / 1024) + "MB"
- else
- fileSize = parseInt(fileSize) + "KB"
- itemTemplate = '<div id="' + file.id + '" class="uploadify-queue-item">\
- <div style="width:50px;margin-right:2px;"><img src="/Content/Img/word.png" style="width:20px;height:20px;"></div><div class="cancel"><a href=""></a></div><span class="fileName">'+ file.name + ' (' + fileSize + ')</span><span class="data"></span></div>'+ itemTemplate;
- $(".border").prepend(itemTemplate);
- $(".drag-tip").remove();
- });
- // 文件上传过程中创建进度条实时显示。
- uploader.on('uploadProgress', function (file, percentage) {
- var $li = $('#' + file.id),
- $percent = $li.find('.uploadify-progress .uploadify-progress-bar');
- // 避免重复创建
- if (!$percent.length) {
- $percent = $('<div class="uploadify-progress uploadify-progress-striped active">' +
- '<div class="uploadify-progress-bar" role="progressbar" style="width: 0%">' +
- '</div>' +
- '</div>').appendTo($li).find('.uploadify-progress-bar');
- }
- $li.find('.data').text(' 上传中').css("color", "red");;
- $percent.css('width', percentage * 100 + '%');
- });
- //文件成功、失败处理
- uploader.on('uploadSuccess', function (file) {
- $('#' + file.id).find('.data').text(' 上传成功').css("color", "green");
- });
- uploader.on('uploadError', function (file) {
- $('#' + file.id).find('.data').text(' 上传出错');
- });
- uploader.on('uploadComplete', function (file) {
- $('#' + file.id).find('.uploadify-progress').fadeOut();
- });
- }
第三步:
html标签
<div style="height: 38px;">
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="fileList" class="uploader-list"></div>
<div class="btns">
<div id="picker">标准文本批量导入(选择文件)</div>
</div>
</div>
</div>
<div class="border" style="height: 200px; border-radius: 5px;overflow-y:scroll">
</div>
第四步:
后台代码
- 1 [AcceptVerbs(HttpVerbs.Post)]
- 2 public JsonResult AllUpload(HttpPostedFileBase fileData)
- 3 {
- 4 if (fileData != null)
- 5 {
- 6 try
- 7 {
- 8 //string H = "";
- 9 string filePath = Common.Url;
- 10 if (fileData != null && fileData.ContentLength > 0)
- 11 {
- 12 string fileName = Path.GetFileName(fileData.FileName);//原始文件名称
- 13 string fileExtension = Path.GetExtension(fileName); // 文件扩展名
- 14
- 15 string aFirstName = fileName.Substring(fileName.LastIndexOf("\\") + 1, (fileName.LastIndexOf(".") - fileName.LastIndexOf("\\") - 1)); //文件名
- 16 string StdNo = "";
- 17 if (aFirstName.Contains("%"))
- 18 StdNo = aFirstName.Split('%')[0].Replace("_", "/");
- 19 else
- 20 StdNo = aFirstName.Replace("_", "/");
- 21 var S = db.Standards.FirstOrDefault(n => n.StdNo == StdNo);
- 22 if (S != null)
- 23 {
- 24 string fileName1 = DateTime.Now.ToString("yyyyMMddHHmmss") + Common.NO(S.StdNo) + Path.GetExtension(fileData.FileName);
- 25 filePath = filePath + Common.NO(fileName1);
- 26 if (System.IO.File.Exists(S.Url))
- 27 System.IO.File.Delete(S.Url);
- 28 fileData.SaveAs(filePath);
- 29 }
- 30 }
- 31
- 32 return Json(new { Success = true, FileName = Path.GetFileName(fileData.FileName), SaveName = Path.GetFileName(fileData.FileName) });
- 33 }
- 34 catch (Exception ex)
- 35 {
- 36 return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
- 37 }
- 38 }
- 39 else
- 40 {
- 41 return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
- 42 }
- 43 }