利用 FormData 對象和 Spring MVC 配合實(shí)現(xiàn)Ajax文件下載功能
Ajax文件下載
利用 FormData 對象和 Spring MVC 配合可以實(shí)現(xiàn)Ajax文件上載功能:
步驟
1.導(dǎo)入組件并準(zhǔn)備靜態(tài)腳本
<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>
1.綁定事件到按鈕
$("upload").click(ajaxUpload);
2.獲取文件
var file1 = $("#file1")[0].files[0];
var file2 = $("#file2")[0].files[0];
3.創(chuàng)建內(nèi)存中的表單對象,并添加向服務(wù)器傳輸?shù)臄?shù)據(jù)
//創(chuàng)建內(nèi)存中的表單對象
var form = new FormData();
//向其中添加要傳輸?shù)臄?shù)據(jù)
form.append("userfile1", file1);
form.append("userfile2", file2);
4.ajax()上傳對象
$.ajax({
url:'user/upload.do',//請求地址
data: form, //請求參數(shù)
type: 'POST', //請求類型
dataType: 'json',//服務(wù)器返回的數(shù)據(jù)類型
contentType: false,//沒有設(shè)置任何內(nèi)容類型頭信息
processData: false, //見jQuery_api詳解
success: function(obj){ //成功時(shí)回調(diào)函數(shù),obj表示服務(wù)器返回的數(shù)據(jù)
if(obj.state==0){
$('#result').html("成功!");
}
}
});
5.Spring-MVC表現(xiàn)層
@RequestMapping("/upload.do")
@ResponseBody
public JsonResult upload(
MultipartFile userfile1,
MultipartFile userfile2) throws Exception{
//Spring MVC 中可以利用 MultipartFile
//接收 上載的文件! 文件中的一切數(shù)據(jù)
//都可以從 MultipartFile 對象中找到
//獲取上再是原始文件名
String file1 =
userfile1.getOriginalFilename();
String file2 =
userfile2.getOriginalFilename();
System.out.println(file1);
System.out.println(file2);
//保存文件的3種方法:
//1. transferTo(目標(biāo)文件)
// 將文件直接保存到目標(biāo)文件, 可以處理大文件
//2. userfile1.getBytes() 獲取文件的全部數(shù)據(jù)
// 將文件全部讀取到內(nèi)存, 適合處理小文件!!
//3. userfile1.getInputStream()
// 獲取上載文件的流, 適合處理大文件
//保存的目標(biāo)文件夾: /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);
//第三種 利用流復(fù)制數(shù)據(jù)
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);
}
總結(jié)
以上所述是小編給大家介紹的利用 FormData 對象和 Spring MVC 配合實(shí)現(xiàn)Ajax文件下載功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- ajax post下載flask文件流以及中文文件名問題
- javascript寫一個(gè)ajax自動(dòng)攔截并下載數(shù)據(jù)代碼實(shí)例
- SpringMVC+Ajax實(shí)現(xiàn)文件批量上傳和下載功能實(shí)例代碼
- Ajax請求二進(jìn)制流進(jìn)行處理(ajax異步下載文件)的簡單方法
- 基于Blod的ajax進(jìn)度條下載實(shí)現(xiàn)示例代碼
- PHP中ajax無刷新上傳圖片與圖片下載功能
- 使用Ajax生成的Excel文件并下載的實(shí)例
- jQuery的ajax下載blob文件
- jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
- PHP+Ajax實(shí)現(xiàn)無刷新分頁實(shí)例詳解(附demo源碼下載)
- 前端ajax請求+后端java實(shí)現(xiàn)的下載zip壓縮包功能示例
相關(guān)文章
使用加載圖片解決在Ajax數(shù)據(jù)加載中頁面出現(xiàn)短暫空白的問題(推薦)
在項(xiàng)目中用ajax異步獲取數(shù)據(jù)后有時(shí)會(huì)因?yàn)閿?shù)據(jù)問題或者網(wǎng)絡(luò)問題,頁面一直顯示空白,現(xiàn)在用加載圖片來過渡這種狀態(tài),具體實(shí)例代碼通過本文一起學(xué)習(xí)吧2016-12-12
ajax異步處理POST表單中的數(shù)據(jù)示例代碼
這篇文章主要介紹了如何利用ajax異步處理POST表單中的數(shù)據(jù),下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-06-06
使用FormData進(jìn)行Ajax請求上傳文件的實(shí)例代碼
這篇文章主要介紹了使用FormData進(jìn)行Ajax請求上傳文件的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
ASP+AJAX+ACCESS數(shù)據(jù)庫實(shí)例講解三個(gè)步驟分享
其實(shí)說起AJAX的初級應(yīng)用是非常簡單的,通俗的說就是客戶端(javascript)與服務(wù)端(asp或php等)腳本語言的數(shù)據(jù)交互2012-07-07
發(fā)現(xiàn)個(gè)AJAX圖片瀏覽器SIMPLEVIEWER
發(fā)現(xiàn)個(gè)AJAX圖片瀏覽器SIMPLEVIEWER...2007-04-04
解決ajax跨域請求數(shù)據(jù)cookie丟失問題
本文主要是從前端jquery和服務(wù)端php為例,分別使用實(shí)例解決ajax跨域請求數(shù)據(jù)cookie丟失問題,推薦給有相同需求的小伙伴們。2015-03-03

