- A+
所属分类：Web前端
第一步：
引入文件
<!--引入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 }
