经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
webuploader批量导入文件
来源:cnblogs  作者:小笨笨宝贝  时间:2021/3/1 17:09:46  对本文有异议

第一步:

引入文件

<!--引入CSS-->
<link href="~/Content/JS/webuploader.css" rel="stylesheet" />
<!--引入JS-->
<script src="~/Content/JS/webuploader.js"></script>

第二步:

/

  1. /文本多个上传
  2. function UploadMultiFile() {
  3. var uploader = WebUploader.create({
  4. // 选完文件后,是否自动上传。
  5. auto: true,
  6. // swf文件路径
  7. swf: '~/Content/JS/Uploader.swf',
  8. // 文件接收服务端。
  9. server: '/Import/AllUpload',
  10. // 选择文件的按钮。可选。
  11. // 内部根据当前运行是创建,可能是input元素,也可能是flash.
  12. pick: '#picker',
  13. // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
  14. resize: false,
  15. fileVal:'fileData'
  16. });
  17. // 当有文件被添加进队列的时候
  18. uploader.on('fileQueued', function (file) {
  19. var itemTemplate = "";
  20. var fileSize = parseInt(file.size / 1024);
  21. if (fileSize >= 1024)
  22. fileSize = parseInt(fileSize / 1024) + "MB"
  23. else
  24. fileSize = parseInt(fileSize) + "KB"
  25. itemTemplate = '<div id="' + file.id + '" class="uploadify-queue-item">\
  26. <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;
  27. $(".border").prepend(itemTemplate);
  28. $(".drag-tip").remove();
  29. });
  30. // 文件上传过程中创建进度条实时显示。
  31. uploader.on('uploadProgress', function (file, percentage) {
  32. var $li = $('#' + file.id),
  33. $percent = $li.find('.uploadify-progress .uploadify-progress-bar');
  34. // 避免重复创建
  35. if (!$percent.length) {
  36. $percent = $('<div class="uploadify-progress uploadify-progress-striped active">' +
  37. '<div class="uploadify-progress-bar" role="progressbar" style="width: 0%">' +
  38. '</div>' +
  39. '</div>').appendTo($li).find('.uploadify-progress-bar');
  40. }
  41. $li.find('.data').text(' 上传中').css("color", "red");;
  42. $percent.css('width', percentage * 100 + '%');
  43. });
  44. //文件成功、失败处理
  45. uploader.on('uploadSuccess', function (file) {
  46. $('#' + file.id).find('.data').text(' 上传成功').css("color", "green");
  47. });
  48. uploader.on('uploadError', function (file) {
  49. $('#' + file.id).find('.data').text(' 上传出错');
  50. });
  51. uploader.on('uploadComplete', function (file) {
  52. $('#' + file.id).find('.uploadify-progress').fadeOut();
  53. });
  54. }

 

第三步:

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. 1 [AcceptVerbs(HttpVerbs.Post)]
  2. 2 public JsonResult AllUpload(HttpPostedFileBase fileData)
  3. 3 {
  4. 4 if (fileData != null)
  5. 5 {
  6. 6 try
  7. 7 {
  8. 8 //string H = "";
  9. 9 string filePath = Common.Url;
  10. 10 if (fileData != null && fileData.ContentLength > 0)
  11. 11 {
  12. 12 string fileName = Path.GetFileName(fileData.FileName);//原始文件名称
  13. 13 string fileExtension = Path.GetExtension(fileName); // 文件扩展名
  14. 14
  15. 15 string aFirstName = fileName.Substring(fileName.LastIndexOf("\\") + 1, (fileName.LastIndexOf(".") - fileName.LastIndexOf("\\") - 1)); //文件名
  16. 16 string StdNo = "";
  17. 17 if (aFirstName.Contains("%"))
  18. 18 StdNo = aFirstName.Split('%')[0].Replace("_", "/");
  19. 19 else
  20. 20 StdNo = aFirstName.Replace("_", "/");
  21. 21 var S = db.Standards.FirstOrDefault(n => n.StdNo == StdNo);
  22. 22 if (S != null)
  23. 23 {
  24. 24 string fileName1 = DateTime.Now.ToString("yyyyMMddHHmmss") + Common.NO(S.StdNo) + Path.GetExtension(fileData.FileName);
  25. 25 filePath = filePath + Common.NO(fileName1);
  26. 26 if (System.IO.File.Exists(S.Url))
  27. 27 System.IO.File.Delete(S.Url);
  28. 28 fileData.SaveAs(filePath);
  29. 29 }
  30. 30 }
  31. 31
  32. 32 return Json(new { Success = true, FileName = Path.GetFileName(fileData.FileName), SaveName = Path.GetFileName(fileData.FileName) });
  33. 33 }
  34. 34 catch (Exception ex)
  35. 35 {
  36. 36 return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
  37. 37 }
  38. 38 }
  39. 39 else
  40. 40 {
  41. 41 return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
  42. 42 }
  43. 43 }

 

原文链接:http://www.cnblogs.com/songhuihui/p/14464096.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号