利用jquery ajax前端与后端的文件传输

本是古典何须时尚 2022-05-23 08:24 562阅读 0赞

首先了解下$ ajax里面的各个属性

1.url:  
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:  
要求为String类型的参数，请求方式（post或get）默认为get。

3.timeout:  
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:  
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache:  
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data:  
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如\{foo1:"bar1",foo2:"bar2"\}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如\{foo:\["bar1","bar2"\]\}转换为&foo=bar1&foo=bar2。

7.dataType:  
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：  
xml：返回XML文档，可用JQuery处理。  
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。  
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。  
json：返回JSON数据。  
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。  
text：返回纯文本字符串。

8.beforeSend：  
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。  
function(XMLHttpRequest)\{  
this; //调用本次ajax请求时传递的options参数  
\}  
9.complete：  
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。  
function(XMLHttpRequest, textStatus)\{  
this; //调用本次ajax请求时传递的options参数  
\}

10.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。  
(1)由服务器返回，并根据dataType参数进行处理后的数据。  
(2)描述状态的字符串。  
function(data, textStatus)\{  
//data可能是xmlDoc、jsonObj、html、text等等  
this; //调用本次ajax请求时传递的options参数  
\}

11.error:  
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：  
function(XMLHttpRequest, textStatus, errorThrown)\{  
//通常情况下textStatus和errorThrown只有其中一个包含信息  
this; //调用本次ajax请求时传递的options参数  
\}

12.contentType：

要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.processData：  
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

前端的向后端传输表单数据的js脚本

function big(){
    $.ajax({
    
    cache: false,
    contentType: false,
     
    type: "POST",
    
    dataType:"text",//返回的数据类型为纯文本字符串
     
    url:"/recognition/servlet/Recognition", //发送请求到后台的地址
     
    data:new FormData(document.getElementById("for") ), //发送的数据是id="for"的表单中的数据,其中document.getElementById()函数的功能是根据对象的名称获取对象
    processData:false,//不希望自动转换
    
    async: false,//请求设为异步
     
    error: function(request) {//发送请求失败执行的函数
     
    alert("发送请求失败！");
    
     
    },
     
    success: function(data) {//发送请求成功执行的函数
    
    }
     
    });

还有需要注意的一点是：

独立的js文件不需要引用任何jquery.js文件，只需要在相应的html网页中引用jquery.js和.js文件，jquery文件引用必须在.js文件之前；

引用方法：<script src="js/jquery.js"></script>；

后台servlet接收前端发送的要上传的文件的代码：

public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		String savePath = this.getServletContext().getRealPath("/Picture");//获得服务器中当前保存路径的物理路径，以获得图片上传路径
            File file = new File(savePath);//创建以savePath为存储路径的文件
            System.out.println(savePath);
            //判断上传文件的保存目录是否存在
            if (!file.exists() && !file.isDirectory()) {
                System.out.println(savePath+"目录不存在，需要创建");
                //创建目录
                 file.mkdir();
            }
            String message = "";
            try{
              //1、创建一个DiskFileItemFactory工厂
                DiskFileItemFactory factory = new DiskFileItemFactory();
                //2、创建一个文件上传解析器
                ServletFileUpload upload = new ServletFileUpload(factory);
                 //解决上传文件名的中文乱码问题
                upload.setHeaderEncoding("UTF-8"); 
                //3、判断提交上来的数据是否是上传表单的数据
                if(!ServletFileUpload.isMultipartContent(request)){
                    //按照传统方式获取数据
                    return;
                }
                //使用ServletFileUpload解析器解析上传数据，解析结果返回的是一个List<FileItem>集合，每一个FileItem对应一个Form表单的输入项
                @SuppressWarnings("unchecked")
    			List<FileItem> list = upload.parseRequest(request);
                for(FileItem item : list){
                    //如果fileitem中封装的是普通输入项的数据
                    if(item.isFormField()){
                        String name = item.getFieldName();
                        //解决普通输入项的数据的中文乱码问题
                        String value = item.getString("UTF-8");
                        //value = new String(value.getBytes("iso8859-1"),"UTF-8");
                        System.out.println(name + "=" + value);
                    }else{//如果fileitem中封装的是上传文件
                        //得到上传的文件名称，
                        String filename = item.getName();
                        System.out.println(filename);
                        if(filename==null || filename.trim().equals("")){
                            continue;
                        }
                        
                        filename = filename.substring(filename.lastIndexOf("\\")+1);
                        //获取item中的上传文件的输入流
                        InputStream in = item.getInputStream();
                        //创建一个文件输出流
                        FileOutputStream out = new FileOutputStream(savePath+"\\"+filename);
                        //创建一个缓冲区
                        byte buffer[] = new byte[1024];
                        //判断输入流中的数据是否已经读完的标识
                        int len = 0;
                        //循环将输入流读入到缓冲区当中
                        while((len=in.read(buffer))>0){
                            out.write(buffer, 0, len);
                        }
                      
                        in.close();
                        out.close();
                        //删除处理文件上传时生成的临时文件
                        item.delete();
                        message = "文件上传成功！";
                    }
                }
            }catch (Exception e) {
                message= "文件上传失败！";
                e.printStackTrace();
                
            }
            request.setAttribute("message",message);
    
    
    
    	}
    
    }