zoukankan      html  css  js  c++  java
  • ajax传输文件+检验

    总共分为三个过程。

    1、前端文件导入:

    文件导入页面:

    1 <input type="file" name="file" id="file1" style=" 500px;" contentEditable="false" onchange="checkFile(this.value)"/>
     1 function checkFile(name){ 
     2          if(/^.+.(txt)$/i.test(name.toLowerCase())){
     3          }else{
     4             alert("请上传格式为TXT的文件!");
     5             form1.reset();
     6          } 
     7       }  
     8     function submits() {
     9         var reSpaceCheck = /^s*$/; // 判断空格
    10         var uploadFileList = $('input[name^="attach"]');
    11         for (var i=0; i< uploadFileList.length; i++){  
    12             if (reSpaceCheck.test(uploadFileList[i].value)) {
    13                 alert("上传文件不能为空!");
    14                 return false;
    15             }
    16         }
    17         if($("#file1").val()==null||$("#file1").val()==""){
    18             alert("请上传文件!");
    19             return false;
    20         }
    21         if(window.confirm("您确定导入文件中的数据吗?")){
    22             setButtonState(false);
    23             //ajax校验文件
    24             ajaxCheckFile();
    25         }
    26     }
    27     function setButtonState(enabled) {
    28         $("button").prop("disabled", enabled);
    29     }
    30     
    31     function ajaxCheckFile() {
    32     $.ajaxFileUpload({
    33         url:"<%=basePath%>remConfigure/importAssesmentInfo.action",
    34         files:["file1"],
    35         async:false,
    36         dataType:"json",
    37         success: function (data){
    38             if(data!=null && ""!=data){
    39                 data = $.parseJSON(data);
    40                 if(data.success){
    41                      setButtonState(true);
    42                     alert("导入成功!");
    43                 }else{
    44                     setButtonState(true);
    45                     asyncbox.success(data.message,"提示",function(){
    46                         return true;
    47                     });
    48                 }
    49             }
    50         },
    51         error: function (data,status,e){
    52             setButtonState(false);
    53             asyncbox.success("导入数据格式错误!","提示",function(){
    54                 setButtonState(true);
    55             });
    56         }
    57     });
    58     return false;
    59 }    
    60 
    61     function resetFile(){
    62         var obj = document.getElementById('file1'); 
    63         obj.outerHTML=obj.outerHTML; 
    64     }

    checkFile用来检验传入的文件必须为txt文件;

    submits做一系列的检验后将文件传到后端;

    setButtonState文件在后端的操作结束之前将按钮置灰直到后端返回true后;

    ajaxCheckFile利用ajax传输文件;

    resetFile重置文件。检验完成后跳转到action中。action中的文件通过setter方法注入。

    2、后端处理

     1     /**目标考核上传文件
     2      * ajax 校验 批量文件
     3      * @return 成功返回 {"success": true}
     4      * 失败返回 {"success": false, "message": 错误信息}
     5      */
     6     public String importAssesmentInfo(){
     7         HttpServletResponse response = ServletActionContext.getResponse();
     8         response.setContentType("text/html");
     9         response.setCharacterEncoding("UTF-8");
    10         try {
    11             if (file!= null) {
    12                 readAndIptTxtFile(file);
    13                 if (checkMessage.size() != 0) {
    14                     StringBuilder sb = new StringBuilder();
    15                     for (String s : checkMessage) {
    16                         sb.append(s).append("<br/>");
    17                     }
    18                     errMsg = sb.toString();
    19                     JSONObject jo = new JSONObject();
    20                     jo.put("success", false);
    21                     jo.put("message", errMsg);
    22                     response.getWriter().write(jo.toString());
    23                 } else {
    24                     response.getWriter().write("{"success": true}");
    25                 }
    26             }
    27         } catch (Exception e) {
    28             e.printStackTrace();
    29         }
    30         return null;
    31     }
    readAndIptTxtFile(file)读取文件并且对该文件操作(逐行导入数据),checkMessage用来储存错误信息,如果有错误信息,则返回前端false和错误信息,如果没有则返回前端true。
     1 private void readAndIptTxtFile(File file) {
     2         BufferedReader bufferedReader = null;
     3         try {
     4             if (file.isFile() && file.exists()) { // 判断文件是否存在
     5                 bufferedReader = new BufferedReader(new InputStreamReader(new FileInputStream(file), encoding));
     6                 String line;
     7                 List<String> list=new ArrayList<String>();
     8 
     9                 //读取第一行数据
    10                 line = bufferedReader.readLine();
    11                 if (line == null) {
    12                     //空文件
    13                     throw new Exception("月目标考核导入文件是空文件");
    14                 }
    15 
    16                 checkFirstLine(line);
    17 
    18                 //读取文件内容
    19                 while ((line = bufferedReader.readLine()) != null) {
    20                     list.add(line.trim());
    21                 }
    22                 if(list.isEmpty()) {
    23                     checkMessage.add("月目标考核导入文件是空文件");
    24                     return;
    25                 }else{
    26                     for(int i=0;i<list.size();i++){
    27                         try{
    28                             addData(list.get(i),i+1);
    29                         }catch (Exception e) {
    30                             arrResp.clear();
    31                             checkMessage.add("文件格式错误,错误在第"+(i+1)+"行");
    32                             break;
    33                         }
    34                     }
    35                     if(arrResp.size()!=0)
    36                         commonService.saveAll(arrResp);
    37                     else
    38                         errMsg = "文件格式错误";
    39                 }
    40             } else {
    41                 checkMessage.add("找不到指定的文件");
    42             }
    43         } catch (Exception e) {
    44             checkMessage.add(e.getMessage());
    45         } finally {
    46             if(bufferedReader != null) {
    47                 try {
    48                     bufferedReader.close();
    49                 } catch (IOException e) {
    50                     e.printStackTrace();
    51                 }
    52             }
    53         }
    54     }

    因为业务要求需要检验第一行的字段格式,所以用checkFirstLine方法去检验第一行的格式然后导入剩下的行数据,addData方法用来将每行数据插入数据库,如果操作抛出异常则将存储插入对象的list清空,如果没有异常则执行插入的方法。

     1 /**
     2      * 检查第一行
     3      * @param line 第一行数据
     4      * @throws Exception 列名错误或第一列不为开始时间  时抛出异常
     5      */
     6     private void checkFirstLine(String line) throws Exception {
     7         line = line.trim();
     8         String[] firstLines = line.split("\|", -1);
     9 
    10         if ("开始时间".equals(firstLines[0])){ //自定义文件导入
    11             titles = firstLines;
    12             outter: for (String firstLine : firstLines) {
    13                 for (String fullTitle : fullTitles) {
    14                     if (fullTitle.equals(firstLine)) {
    15                         continue outter;
    16                     }
    17                 }
    18                 throw new Exception("列名称错误: " + firstLine);
    19             }
    20         } else {
    21             throw new Exception("第一列必须为开始时间");
    22         }
    23     }
    3、前端响应
     1  success: function (data){
     2              if(data!=null && ""!=data){
     3                  data = $.parseJSON(data);
     4                  if(data.success){
     5                       setButtonState(true);
     6                      alert("导入成功!");
     7                  }else{
     8                      setButtonState(true);
     9                     asyncbox.success(data.message,"提示",function(){
    10                          return true;
    11                      });
    12                  }
    13              }
    14          },

    data:返回的数据。data.success=true则表示"前端传入文件—后端处理—返回处理信息给前端"这一过程完成。

     
  • 相关阅读:
    围炉夜话(14)
    围炉夜话(13)
    ATmega128中应用的hex与bootloader的hex合并的实现
    配置IAR for AVR 既可以仿真也可以生成Hex文件
    atmega128 bootloader程序在IAR-AVR下 linker文件的配置及原因
    一步步学习SPD2010--第十四章节--在Web页面使用控件(8)--关键点
    一步步学习SPD2010--第十四章节--在Web页面使用控件(7)--使用SP服务器控件
    一步步学习SPD2010--第十四章节--在Web页面使用控件(6)--测试ASP.NET表单
    一步步学习SPD2010--第十四章节--在Web页面使用控件(4)--使用ASP.NET验证控件
    一步步学习SPD2010--第十四章节--在Web页面使用控件(3)--验证用户数据输入
  • 原文地址:https://www.cnblogs.com/popcornya/p/6923488.html
Copyright © 2011-2022 走看看