View页面 js文件。封装到一个js文件里面

  1.   (function ($) {
  2.        //可以忽略
  3.         var defaultSettings = {
  4.             url: "http://upload.zhtxw.cn/UploadImage.ashx",                 //上传地址
  5.             buttonFeature: true,          //true:点击按钮时仅选择文件； false:选择完文件后立即上传
  6.             fileSuffixs: ["jpg", "png"],       //允许上传的文件后缀名列表
  7.             errorText: "不能上传后缀为 {0} 的文件！", //错误提示文本，其中{0}将会被上传文件的后缀名替换
  8.             onCheckUpload: function (text) { //上传时检查文件后缀名不包含在fileSuffixs属性中时触发的回调函数，(text为错误提示文本)
  9.                 alert("不能上传后缀为 " + text + " 的文件");
  10.                 return false;
  11.             },
  12.             onComplete: function (msg) {
  13.                 //上传完成后的回调函数[不管成功或失败，它都将被触发](msg为服务端的返回字符串)
  14.             },
  15.  
  16.             onChosen: function (file, obj) { //选择文件后的回调函数，(file为选中文件的本地路径;obj为当前的上传控件实例)
  17.  
  18.                 //alert(file);
  19.             },
  20.             maximumFilesUpload: 5,//最大文件上传数(当此属性大于1时，buttonFeature属性只能为true)
  21.             onSubmitHandle: function (uploadFileNumber) { //提交上传时的回调函数，uploadFileNumber为当前上传的文件数量
  22.                 //在此回调中返回false上传提交将被阻止
  23.                 return true;
  24.             },
  25.             onSameFilesHandle: function (file) { //当重复选择相同的文件时触发
  26.                 //在此回调中返回false当前选择的文件将从上传队列中取消
  27.                 return true;
  28.             },
  29.             perviewImageElementId: "",//用于预览上传图片的元素id（请传入一个div元素的id）
  30.  
  31.             perviewImgStyle: null//用于设置图片预览时的样式（可不设置，在不设置的情况下多文件上传时只能显示一张图片），如{ width: '100px', height: '100px', border: '1px solid #ebebeb' }
  32.         };
  33.  
  34.         $.fn.uploadFile = function (settings) {
  35.  
  36.             settings = $.extend({}, defaultSettings, settings || {});
  37.  
  38.             if (settings.perviewImageElementId) {
  39.                 //设置图片预览元素的必须样式
  40.                 if (!settings.perviewImgStyle) {
  41.                     var perviewImg = document.getElementById(settings.perviewImageElementId);
  42.                     perviewImg.style.overflow = "hidden";
  43.                 }
  44.             }
  45.  
  46.             return this.each(function () {
  47.                 var self = $(this);
  48.  
  49.                 var upload = new UploadAssist(settings);
  50.  
  51.                 upload.createIframe(this);
  52.  
  53.                 //绑定当前按钮点击事件
  54.                 self.bind("click", function (e) {
  55.                     upload.chooseFile();
  56.  
  57.                 });
  58.  
  59.                 //将上传辅助类的实例，存放到当前对象中，方便外部获取
  60.                 self.data("uploadFileData", upload);
  61.  
  62.                 //创建的iframe中的那个iframe，它的事件需要延迟绑定
  63.                 window.setTimeout(function () {
  64.  
  65.                     //为创建的iframe内部的iframe绑定load事件
  66.                     $(upload.getIframeContentDocument().body.lastChild).load(function () {
  67.                         var dcmt = upload.getInsideIframeContentDocument();
  68.                         if (dcmt.body.innerHTML) {
  69.  
  70.                             if (settings.onComplete) {
  71.                                 settings.onComplete(dcmt.body.innerHTML);
  72.                             }
  73.  
  74.                             dcmt.body.innerHTML = "";
  75.                         }
  76.                     });
  77.                 }, 100);
  78.             });
  79.         };
  80.     })(jQuery);
  81.  
  82.     //上传辅助类
  83.     function UploadAssist(settings) {
  84.         //保存设置
  85.         this.settings = settings;
  86.         //已选择文件的路径集合
  87.         this.choseFilePath = [];
  88.         //创建的iframe唯一名称
  89.         this.iframeName = "upload" + this.getInputFileName();
  90.         return this;
  91.     }
  92.  
  93.     UploadAssist.prototype = {
  94.         //辅助类构造器
  95.         constructor: UploadAssist,
  96.  
  97.         //创建iframe
  98.         createIframe: function (elem) {
  99.  
  100.             var html = "<html> "
  101.                 + " <head> "
  102.         + "<title>upload</title>"
  103.         + "<script>"
  104.                     + "function getDCMT(){return window.frames['dynamic_creation_upload_iframe'].document;}"
  105.                     + "</" + "script>"
  106.                     + "</head>"
  107.                     + "<body>"
  108.                     + "<form method='post' target='dynamic_creation_upload_iframe' enctype='multipart/form-data' action='" + this.settings.url + "'>"
  109.                     + "</form>"
  110.                     + "<iframe name='dynamic_creation_upload_iframe'></iframe>"
  111.                     + "</body>"
  112.                     + "</html>";
  113.  
  114.             this.iframe = $("<iframe name='" + this.iframeName + "'></iframe>")[0];
  115.             this.iframe.style.width = "0px";
  116.             this.iframe.style.height = "0px";
  117.             this.iframe.style.border = "0px solid #fff";
  118.             this.iframe.style.margin = "0px";
  119.             this.iframe.style.display = "none";
  120.             elem.parentNode.insertBefore(this.iframe, elem);
  121.             var iframeDocument = this.getIframeContentDocument();
  122.             iframeDocument.write(html);
  123.             iframeDocument.close();
  124.         },
  125.  
  126.         //获取上传控件名称
  127.         getInputFileName: function () {
  128.             return (new Date()).valueOf();
  129.         },
  130.  
  131.         //创建上传控件到创建的iframe中
  132.         createInputFile: function () {
  133.             var that = this;
  134.             var dcmt = this.getIframeContentDocument();
  135.             var input = dcmt.createElement("input");
  136.             input.type = "file";
  137.             input.setAttribute("name", "input" + this.getInputFileName());
  138.             input.setAttribute("multiple","true");
  139.             input.onchange = function () {
  140.  
  141.                 //检查是否为允许上传的文件
  142.                 if(this.files==undefined){
  143.                   var fileSuf = this.value.substring(this.value.lastIndexOf(".") + 1);
  144.                     if (!that.checkFileIsUpload(fileSuf, that.settings.fileSuffixs)) {
  145.                         dcmt.forms[0].innerHTML = "";
  146.                         that.settings.onCheckUpload(that.settings.errorText.replace("{0}", fileSuf));
  147.                         return;
  148.                     }
  149.                 }else{
  150.                     for (var i = 0; i < this.files.length; i++) {
  151.                         var tempName=this.files[i].name.substring(this.files[i].name.lastIndexOf(".") + 1);
  152.                         if (!that.checkFileIsUpload(tempName, that.settings.fileSuffixs)) {
  153.                             dcmt.forms[0].innerHTML = "";//清空上传队列
  154.                             that.settings.onCheckUpload(that.settings.errorText.replace("{0}", tempName));
  155.                             return;
  156.                         }
  157.                     }
  158.                 }
  159.  
  160.                 //选中后的回调
  161.                 that.settings.onChosen(this.value, this);
  162.  
  163.                 if (that.checkFileIsExist(this.value)) {
  164.                     //保存已经选择的文件路径
  165.                     that.choseFilePath.push({ "name": this.name, "value": this.value });
  166.                     var status = that.settings.onSameFilesHandle(this.value);
  167.                     if (typeof status === "boolean" && !status) {
  168.                         that.removeFile(this.value);
  169.                         return;
  170.                     }
  171.                 } else {
  172.                     //保存已经选择的文件路径
  173.                     that.choseFilePath.push({ "name": this.name, "value": this.value });
  174.                 }
  175.  
  176.                 if (!that.settings.buttonFeature) {
  177.                     that.submitUpload();
  178.                 }
  179.             };
  180.             dcmt.forms[0].appendChild(input);
  181.             return input;
  182.         },
  183.  
  184.         //获取创建的iframe中的document对象
  185.         getIframeContentDocument: function () {
  186.             return this.iframe.contentDocument || this.iframe.contentWindow.document;
  187.         },
  188.  
  189.         //获取创建的iframe所在的window对象
  190.         getIframeWindow: function () {
  191.             return this.iframe.contentWindow || this.iframe.contentDocument.parentWindow;
  192.         },
  193.  
  194.         //获取创建的iframe内部iframe的document对象
  195.         getInsideIframeContentDocument: function () {
  196.             return this.getIframeWindow().getDCMT();
  197.         },
  198.  
  199.         //获取上传input控件
  200.         getUploadInput: function () {
  201.             var inputs = this.getIframeContentDocument().getElementsByTagName("input");
  202.             var len = inputs.length;
  203.  
  204.             if (len > 0) {
  205.                 if (!inputs[len - 1].value) {
  206.                     return inputs[len - 1];
  207.                 } else {
  208.                     return this.createInputFile();
  209.                 }
  210.             }
  211.             return this.createInputFile();
  212.         },
  213.  
  214.         //forEach迭代函数
  215.         forEach: function (/*数组*/arr, /*代理函数*/fn) {
  216.             var len = arr.length;
  217.             for (var i = 0; i < len; i++) {
  218.                 var tmp = arr[i];
  219.                 if (fn.call(tmp, i, tmp) == false) {
  220.                     break;
  221.                 }
  222.             }
  223.         },
  224.  
  225.         //提交上传
  226.         submitUpload: function () {
  227.             var status = this.settings.onSubmitHandle(this.choseFilePath.length);
  228.             if (typeof status === "boolean") {
  229.                 if (!status) {
  230.                     return;
  231.                 }
  232.             }
  233.             this.clearedNotChooseFile();
  234.             var dcmt = this.getIframeContentDocument();
  235.             dcmt.forms[0].submit();
  236.         },
  237.  
  238.         //检查文件是否可以上传
  239.         checkFileIsUpload: function (fileSuf, suffixs) {
  240.  
  241.             var status = false;
  242.             this.forEach(suffixs, function (i, n) {
  243.                 if (fileSuf.toLowerCase() === n.toLowerCase()) {
  244.                     status = true;
  245.                     return false;
  246.                 }
  247.             });
  248.             return status;
  249.         },
  250.  
  251.         //检查上传的文件是否已经存在上传队列中
  252.         checkFileIsExist: function (/*当前上传的文件*/file) {
  253.  
  254.             var status = false;
  255.             this.forEach(this.choseFilePath, function (i, n) {
  256.                 if (n.value == file) {
  257.                     status = true;
  258.                     return false;
  259.                 }
  260.             });
  261.             return status;
  262.         },
  263.  
  264.         //清除未选择文件的上传控件
  265.         clearedNotChooseFile: function () {
  266.             var files = this.getIframeContentDocument().getElementsByTagName("input");
  267.  
  268.             this.forEach(files, function (i, n) {
  269.                 if (!n.value) {
  270.                     n.parentNode.removeChild(n);
  271.                     return false;
  272.                 }
  273.             });
  274.         },
  275.  
  276.         //将指定上传的文件从上传队列中删除
  277.         removeFile: function (file) {
  278.               var that = this;
  279.             var files = this.getIframeContentDocument().getElementsByTagName("input");
  280.             this.forEach(this.choseFilePath, function (i, n) {
  281.                 var arr = n.value.split('\\');//注split可以用字符或字符串分割
  282.                 if (arr[arr.length - 1] == file) {
  283.                     that.forEach(files, function (j, m) {
  284.                         if (m.name == n.name) {
  285.                             m.parentNode.removeChild(m);
  286.                             return false;
  287.                         }
  288.                     });
  289.                     that.choseFilePath.splice(i, 1);
  290.                     return false;
  291.                 }
  292.             });
  293.  
  294.         },
  295.  
  296.         //清空上传队列
  297.         clearUploadQueue: function () {
  298.             this.choseFilePath.length = 0;
  299.             this.getIframeContentDocument().forms[0].innerHTML = "";
  300.         },
  301.  
  302.         //选择上传文件
  303.         chooseFile: function () {
  304.             var uploadfile;
  305.             if (this.choseFilePath.length == this.settings.maximumFilesUpload) {
  306.                 if (this.settings.maximumFilesUpload <= 1) {
  307.                     this.choseFilePath.length = 0;
  308.                     var files = this.getIframeContentDocument().getElementsByTagName("input");
  309.                     if (!files.length) {
  310.                         uploadfile = this.getUploadInput();
  311.                         $(uploadfile).click();
  312.                         return;
  313.                     } else {
  314.                         uploadfile = files[0];
  315.                         $(uploadfile).click();
  316.                         return;
  317.                     }
  318.                 } else {
  319.                     return;
  320.                 }
  321.             }
  322.             uploadfile = this.getUploadInput();
  323.             $(uploadfile).click();
  324.         }
  325.     };

引用那个js文件后，

<div class="alertTypeContent">
<table cellpadding="5" cellspacing="5" width="100%">
<tr>
<td width="80">导入：</td>
<td>
<div class="file"><input type="button" name="files" value="浏览..." class="btn-green" id="upload">选择文件</div>
</td>
</tr>
<tr>
<td colspan="2" class="text_center" id="ImportShopText"></td>
</tr>
</table>

</div>

  1. $("#upload").uploadFile({
  2. url: "/VipShopManage/UploadShop", //上传地址
  3. fileSuffixs: ["xls", "xlsx"], //可上传的文件类型
  4. buttonFeature: false, //是否开启自动上传。true为不开启
  5. errorText: "{0}", //错误提示
  6. maximumFilesUpload: , //最大文件上传数
  7. onChosen: function (file, obj) { //选择文件后的回调函数，(file为选中文件的本地路径;obj为当前的上传控件实例)
  8. var msgSpan = $("#ImportShopText");
  9. msgSpan.html("正在验证数据，请稍等......");
  10. },
  11. onComplete:
  12. //上传成功以后执行该方法.注意方法的参数一定和原有的方法的参数保持一致
  13. function(serverData) {
  14. var msgSpan = $("#ImportShopText");
  15. var result = eval('(' + serverData + ')');
  16. ) {
  17. msgSpan.html(result.msg);
  18. }
  19. //部分数据不正确
  20. ) {
  21. var failTxt = $("#failTxt");
  22. var failShopTxt = $("#failShopTxt");
  23. var txtMsg = "";
  24. $(result.data).each(function(key, value) {
  25. txtMsg += "<li>" + value + "</li>";
  26. });
  27. failTxt.html(result.msg);
  28. failShopTxt.html(txtMsg);
  29. closeImportShop();
  30. openFailShop();
  31. }
  32. ) {
  33. closeImportShop();
  34. opensuccess();
  35. $("#successTxt").html(result.msg);
  36. }
  37. return;
  38. }
  39. });
  40.  
  41. controller:
  43. public ActionResult UploadShop()
  44. {
  45. var res = new ToResponse();
  46. var resultList = new List<string>();
  47. //上传
  48. try
  49. {
  50. ; i < Request.Files.Count; i++)
  51. {
  52. var httpPostedFileBase = Request.Files[i];
  53. if (httpPostedFileBase != null)
  54. {
  55. string fileName = Path.GetFileName(httpPostedFileBase.FileName);
  56. string fileEx = System.IO.Path.GetExtension(fileName); //获取上传文件的扩展名
  57. var postedFileBase = Request.Files[i];
  58. var stream = postedFileBase.InputStream;
  59. byte[] bytes = new byte[stream.Length];
  60. stream.Read(bytes, , bytes.Length);
  61. stream.Seek(, SeekOrigin.Begin);
  62. )
  63. {
  64. continue;
  65. }
  66. const string fileType = ".xls,.xlsx"; //定义上传文件的类型字符串
  67. fileName = DateTime.Now.ToString("yyyyMMddhhmmss") + fileEx;
  68. if (fileEx != null && !fileType.Contains(fileEx))
  69. {
  70. res = , msg = "请按正确文件格式（.xls或.xlsx）导入！",data=null};
  71. return Content(JsonConvertTool.SerializeObject(res));
  72. }
  73. string filePath = ConfigurationManager.AppSettings["ImportShopFilePath"];
  74. if (!Directory.Exists(filePath))
  75. {
  76. Directory.CreateDirectory(filePath);
  77. }
  78. string savePath = Path.Combine(filePath, fileName);
  79. var fs = new FileStream(savePath, FileMode.OpenOrCreate, FileAccess.Write);
  80. fs.Write(bytes, , bytes.Length);
  81. fs.Flush();
  82. fs.Close();
  83. //获取excel中的内容
  84. DataTable contactTable = ReadExcelByOledb(savePath, fileEx);
  85. //删除文件
  86. System.IO.File.Delete(savePath);
  87. foreach (DataRow item in contactTable.Rows)
  88. {
  89. )
  90. {
  91. res = , msg = "请按正确文件格式（.xls或.xlsx）导入！", data = null};
  92. return Content(JsonConvertTool.SerializeObject(res));
  93. }
  94. ] != null)
  95. {
  96. ].ToString();
  97. )
  98. {
  99. val = val.Replace(" ", "");
  100. }
  101. resultList.Add(val);
  102. }
  103. }
  104. )
  105. {
  106. res = , msg = "内容为空，验证失败！", data = null };
  107. return Content(JsonConvertTool.SerializeObject(res));
  108. }
  109. )
  110. {
  111. res = , msg = "导入数据不能大于1000条！", data = null };
  112. return Content(JsonConvertTool.SerializeObject(res));
  113. }
  114. //验证供货商
  115. var noValidateNames = ValidateShop(resultList);
  116. )
  117. {
  118. res = new ToResponse
  119. {
  120. code = -,
  121. msg = "以下内容（" + noValidateNames .Count+ "条）验证未通过，请检查后重新导入：",
  122. data = noValidateNames
  123. };
  124. return Content(JsonConvertTool.SerializeObject(res));
  125. }
  126. )
  127. {
  128. res = new ToResponse
  129. {
  130. code = ,
  131. msg = "导入成功！共导入" + resultList.Count + "条数据！",
  132. data = null
  133. };
  134. return Content(JsonConvertTool.SerializeObject(res));
  135. }
  136. }
  137. }
  138. }
  139. catch (Exception ex)
  140. {
  141. LogHelper.ErrorFormat("UploadShop:导入供货商发生错误：错误信息是{0}", ex);
  142. res = , msg = "导入失败！", data = null };
  143. }
  144. return Content(JsonConvertTool.SerializeObject(res));
  145. }
  146.  
  147. private DataTable ReadExcelByOledb(string fileNamePath, string fileEx)
  148. {
  149. string connStr = "";
  150. if (fileEx == ".xls")
  151. {
  152. connStr = "Provider=Microsoft.Jet.OLEDB.4.0;Extended Properties=Excel 8.0;data source=" + fileNamePath +
  153. "HDR=Yes; IMEX=1";
  154. }
  155. else
  156. {
  157. connStr = "Provider=Microsoft.Ace.OleDb.12.0;Data Source=" + fileNamePath +
  158. ";Extended Properties='Excel 12.0; HDR=Yes; IMEX=1'";
  159. }
  160. var oledbconn1 = new OleDbConnection(connStr);
  161. oledbconn1.Open();
  162. DataTable table = oledbconn1.GetOleDbSchemaTable(OleDbSchemaGuid.Tables, new object[] { null, null, null, "TABLE" });
  163.  
  164. )
  165. {
  166. ]["TABLE_NAME"].ToString().Trim();
  167. string sql = string.Format("SELECT * FROM [{0}]", strTableName);
  168. table = new DataTable();
  169. OleDbDataAdapter da = new OleDbDataAdapter(sql, oledbconn1);
  170. da.Fill(table);
  171. }
  172. oledbconn1.Close();
  173. return table;
  174. }
  175. }

MVC异步 导入excel文件的更多相关文章

  1. .Net MVC 导入导出Excel总结(三种导出Excel方法，一种导入Excel方法) 通过MVC控制器导出导入Excel文件(可用于java SSH架构)

    .Net MVC  导入导出Excel总结(三种导出Excel方法,一种导入Excel方法) [原文地址] 通过MVC控制器导出导入Excel文件(可用于java SSH架构)   public cl ...

  2. springMVC(5)---导入excel文件数据到数据库

    springMVC(5)---导入excel文件数据到数据库 上一篇文章写了从数据库导出数据到excel文件,这篇文章悄悄相反,写的是导入excel文件数据到数据库.上一篇链接:springMVC(4 ...

  3. POI异步导入Excel兼容xsl和xlsx

    项目架构:spring+struts2+hibernate4+oracle 需求:用户导入excel文件,导入到相应的数据表中,要求提供导入模板,支持xls和xlsx文件 思路分析: 1.提供一个下载 ...

  4. Java POI导入Excel文件

    今天在公司需要做个导入Excel文件的功能,所以研究了一下,参考网上的一些资料总算是做出来了,在此记录一下防止以后忘记怎么弄. 本人用的是poi3.8,所以需要的JAR包如下: poi-3.8.jar ...

  5. phpexcel导入excel文件报the filename xxx is not recognised as an OLE file错误。

    工作中频繁会用phpexcel类导入excel文件的数据到数据库,目前常用的excel文件格式有:xls.csv.xlsx. 刚开始,针对xls文件,使用如下程序,能正常运行: $objReader ...

  6. YII使用PHPExcel导入Excel文件的方法

    1.下载phpexcel,将压缩包中的classes复制到protected/extensions下并修改为PHPExcel. 2.修改YII配置文件config/main.php 'import'= ...

  7. excel数据 入库mysql 和 mysql数据 导入excel文件

    1.excel数据入库mysql 首先准备excel文件, 标红的地方需要留意,一个是字段名所在行,一个表名对应页: 然后私用mysql工具 navicat, 选择数据库,然后导入文件, 选中相应ex ...

  8. java后端导入excel模板和导入excel文件去读数据

    模板转载地址:https://www.cnblogs.com/zhangyangtao/p/9802948.html 直接上代码(我是基于ssm写的demo,导入文件目前只能读取.xls后缀的exce ...

  9. C# Aspose.Cells方式导入Excel文件

    读取Excel 类 我返回的是DataTable 类型 也可以返回DataSet类型 public class XlsFileHelper { public DataTable ImportExcel ...

随机推荐

  1. C#基础系列（一）

    1.vs中F5(调试)和Ctrl + F5(直接运行不调试)的区别: Ctrl+F5是直接运行生成的程序,不进行重新编绎,所以运行起来比较快F5是重新编绎后再运行,这样可以在程序代码中设置断点跟踪来调 ...

  2. SpringMVC（三）

    今天是学习Spring的第四天,今天终于又把Spring+SpringMVC+Mybatis(SSM)高了一遍,这次运行的代码和配置和昨天的不一样,今天运行的很成功. 主要学习的一点就是我今天使用的是 ...

  3. C#学习笔记（一）：一些零散但重要的知识点汇总

    集合类型 数组 数组需要注意的就是多维数组和数组的数组之间的区别,如下: using System; namespace Study { class Program { static void Mai ...

  4. 教你50招提升ASP.NET性能（十二）：在生产环境，仔细考虑你需要记录哪些日志

    (18)When in production, carefully consider what you need to log 招数18: 在生产环境,仔细考虑你需要记录哪些日志 Many peopl ...

  5. Jfinal极速开发微信系列教程（一）--------------Jfinal_weixin demo的使用分析

    概述: Jfinal_weixin已经出了有好一段时间了!一直在关注当中......最近工作上有需要到这个东西,所以,话了两个小时来看看这个东西,看完demo以后,豁然开朗,原理微信和一般的web项目 ...

  6. CPU相关信息

    unit untCpuInfo;interface{ 获取 CPU 制造商 }function GetCpuFactory: String;{ 获取 CPU 家族系统 }function GetCpu ...

  7. [RxJS] AsyncSubject

    AsyncSubject emit the last value of a sequence only if the sequence completed. This value is then ca ...

  8. swift 开篇

    苹果的WWDC ,除了公布了os x 10.10 和IOS8 外,还推出了Swift.具体点击这里 代码整体风格有点像Java,也有点像javascript. 以下给出一些代码段(来自苹果官方手冊): ...

  9. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

  10. 读写锁ReaderWriterLockSlim

    读写锁的概念很简单,允许多个线程同时获取读锁,但同一时间只允许一个线程获得写锁,因此也称作共享-独占锁. 某些场合下,对一个对象的读取次数远远大于修改次数,如果只是简单的用lock方式加锁,则会影响读 ...