ajax传输文件+检验

总共分为三个过程。

1、前端文件导入:

文件导入页面:

1 <input type="file" name="file" id="file1" style="width: 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则表示"前端传入文件—后端处理—返回处理信息给前端"这一过程完成。

 
时间: 2024-10-14 23:31:51

ajax传输文件+检验的相关文章

【转】QQ传输文件原理参考(来自互联网)

QQ的文件发送是怎样的过程呢?通常,发送文件的计算机首先要通过消息服务器将其IP地址发送给接收计算机,当接收计算机同意接收的确认消息反馈到消息服务器后,消息服务器将据此设置好文件传输对话.随即,发送计算机与接收计算机就会在确定好的端口范围内,建立起TCP或UDP连接开始文件的检索与传输. 在默认状态下,QQ优先采用了UDP(User Data Protocol,用户数据报协议)协议传送数据,而对可靠性要求高的数据通讯系统往往使用TCP协议传输数据.与TCP协议不同,UDP协议并不提供数据传送的验

使用 vsftpd 服务传输文件

1.文件传输协议(File Transfer Protocol,FTP) FTP是一种在互联网中进行文件传输的协议,基于客户端/服务器模式,默认使用20.21号端口,其中端口20(数据端口)用于进行数据传输,端口21(命令端口)用于接受客户端发出的相关FTP命令与参数. FTP服务器是按照FTP协议在互联网上提供文件存储和访问服务的主机,FTP客户端则是向服务器发送连接请求,以建立数据传输链路的主机.FTP协议有下面两种工作模式. 主动模式:FTP服务器主动向客户端发起连接请求. 被动模式:FT

基于jquery的Ajax实现 文件上传

---------------------------------------------------------------遇到困难的时候,勇敢一点,找同学朋友帮忙,找导师求助. Ajax Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据). 同步交互:客户端发出一个请

AJAX与文件上传

一.ajax ajax(Asynchronous JavaScript And XML):异步JavaScript和XML,即使用JavaScript语句与服务器进行异步交互,传输的数据为XML(也可以是json数据).实际上就是在JavaScript语句里用ajax可以向服务器发送请求. 两大特点: 1,异步交互 2,页面局部刷新 语法: 基于jQuery:<script>$('.cc').click(function(){ #当我们点击'.cc'这个类的时候就会触发ajax请求 $.aja

基于springboot的ajax异步文件上传

原文链接:https://blog.csdn.net/Yaphst/article/details/82625159 input选项 input可以不写在form中,从而也就不需要添加enctype=”multipart/form-data” 和method=”post”,这里我们直接写一个input. <input id="cert" type="file" /> <input type="button" value=&quo

AJAX传输图片文件

AJAX传输 例:const xhr = new XMLHttpRequest(); // 此方法因为状态改变被调用多次,实测执行三次(1->2->4) xhr.onreadystatechange = () => { if (xhr.readystate === 4 && xhr.status === 200) { console.log(‘upload success’); } else { console.log(‘upload fail); } }; xhr.op

java socket通信-传输文件图片--传输图片

ClientTcpSend.java   客户端发送类 package com.yjf.test; import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream; import java.net.InetSocketAddress; import java.net.Socket; public class ClientTcpSend { public static String clien

securecrt在linux与windows之间传输文件(转)

摘自:http://blog.csdn.net/rangf/article/details/6096365 SecureCRT这款SSH客户端软件同时具备了终端仿真器和文件传输功能.比ftp命令方便多了,而且服务器不用再开FTP服务了.rz,sz是便是Linux/Unix同Windows进行ZModem文件传输的命令行工具. windows端需要支持ZModem的telnet/ssh客户端,SecureCRT就可以用SecureCRT登陆到Unix/Linux主机(telnet或ssh均可).

ARM 开发板嵌入式linux系统与主机PC通过串口传输文件

本文转载自http://useless20.blog.163.com/blog/static/237409982010227127576/ 嵌入式linux系统与主机通过串口传输文件 我想如果要从PC机下载东西到开发板的嵌入式linux系统里面,很多人首先会想到用tftp sftp等网络工具从网口下载.但如果网络用不了,只能通过串口下载怎么办呢?这个时候有两个工具能帮到你:一个是zmrx.zmtx,另外一个是lsz.lrz.个人觉得zmrx/zmtx没有lsz/lrz稳定,建议还是用后者.下面介