利用 FormData 對象和 Spring MVC 配合可以實現Ajax文件上載功能

Ajax文件上載

利用 FormData 對象和 Spring MVC 配合可以實現Ajax文件上載功能:

步驟

1. 導入組件並准備靜態腳本

    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.2</version>
    </dependency>
   

---

	<h1>Ajax 文件上載</h1>
	<input type="file" id="file1"> <br>
	<input type="file" id="file2"> <br>
	<input type="button" id="upload" value="上載" >

	<div id="result"></div>

2. 綁定事件到按鈕

    $("upload").click(ajaxUpload);
   

3. 獲取文件

    var file1 = $("#file1")[0].files[0];
    var file2 = $("#file2")[0].files[0];
   

4. 創建內存中的表單對象,並添加向服務器傳輸的數據

    //創建內存中的表單對象
    var form = new FormData();
    
    //向其中添加要傳輸的數據
    form.append("userfile1", file1);
    form.append("userfile2", file2);
   

5. ajax()上傳對象

    $.ajax({
    	url:'user/upload.do',//請求地址
    	data: form,		//請求參數
    	type: 'POST',	//請求類型
    	dataType: 'json',//服務器返回的數據類型
    	contentType: false,//沒有設置任何內容類型頭信息
    	processData: false, //見jQuery_api詳解
    	success: function(obj){ //成功時回調函數,obj表示服務器返回的數據
    		if(obj.state==0){
    			$('#result').html("成功!"); 
    		}
    	}
    });
   

6. Spring-MVC表現層

    @RequestMapping("/upload.do")
    @ResponseBody
    public JsonResult upload( 
    		MultipartFile userfile1, 
    		MultipartFile userfile2) throws Exception{
    	//Spring MVC 中可以利用 MultipartFile 
    	//接收 上載的文件! 文件中的一切數據
    	//都可以從 MultipartFile 對象中找到
    	
    	//獲取上再是原始文件名
    	String file1 = 
    		userfile1.getOriginalFilename();
    	String file2 = 
    		userfile2.getOriginalFilename();
    	
    	System.out.println(file1);
    	System.out.println(file2);
    	
    	//保存文件的3種方法:
    	//1. transferTo(目標文件)
    	//   將文件直接保存到目標文件, 可以處理大文件
    	//2. userfile1.getBytes() 獲取文件的全部數據
    	//   將文件全部讀取到內存, 適合處理小文件!!
    	//3. userfile1.getInputStream()
    	//   獲取上載文件的流, 適合處理大文件
    	
    	//保存的目標文件夾: /home/soft01/demo
    	File dir = new File("D:/demo");
    	dir.mkdir();
    	
    	File f1 = new File(dir, file1);
    	File f2 = new File(dir, file2);
    	
    	//第一種保存文件
    	//userfile1.transferTo(f1);
    	//userfile2.transferTo(f2);
    	
    	//第三種 利用流復制數據
    	InputStream in1 = userfile1.getInputStream();
    	FileOutputStream out1 = 
    		new FileOutputStream(f1);
    	int b;
    	while((b=in1.read())!=-1){
    		out1.write(b);
    	}
    	in1.close();
    	out1.close();
    	
    	InputStream in2 = userfile2.getInputStream();
    	FileOutputStream out2=
    			new FileOutputStream(f2);
    	byte[] buf= new byte[8*1024];
    	int n;
    	while((n=in2.read(buf))!=-1){
    		out2.write(buf, 0, n);
    	}
    	in2.close();
    	out2.close();
    	
    	return new JsonResult(true);
    }