首頁 > web前端 > js教程 > 利用 FormData 物件和 Spring MVC 配合實作Ajax檔案下載功能(圖文教學)

利用 FormData 物件和 Spring MVC 配合實作Ajax檔案下載功能(圖文教學)

亚连
發布: 2018-05-22 09:49:24
原創
1589 人瀏覽過

這篇文章主要介紹了利用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="上载" >
  <p id="result"></p>
登入後複製

1.綁定事件到按鈕


$("upload").click(ajaxUpload);
登入後複製


#
var file1 = $("#file1")[0].files[0];
var file2 = $("#file2")[0].files[0];
登入後複製

2.取得檔案


//创建内存中的表单对象
var form = new FormData();
//向其中添加要传输的数据
form.append("userfile1", file1);
form.append("userfile2", file2);
登入後複製

#3.建立記憶體中的表單物件,並加入到伺服器傳輸的資料

$.ajax({
  url:&#39;user/upload.do&#39;,//请求地址
  data: form,   //请求参数
  type: &#39;POST&#39;,  //请求类型
  dataType: &#39;json&#39;,//服务器返回的数据类型
  contentType: false,//没有设置任何内容类型头信息
  processData: false, //见jQuery_api详解
  success: function(obj){ //成功时回调函数,obj表示服务器返回的数据
    if(obj.state==0){
      $(&#39;#result&#39;).html("成功!"); 
    }
  }
});
登入後複製

#4.ajax()上傳物件

##### #
@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);
  }
登入後複製
############5.Spring-MVC表現層#############rrreee###上面是我整理給大家的,希望今後會對大家有幫助。 ######相關文章:#########基於apicloudAJAX請求程式碼集合(絕對詳細)###############原生JS實作Ajax跨域請求flask回應內容(圖文教學)###############Ajax 實作網站劫持的偵測方法####################

以上是利用 FormData 物件和 Spring MVC 配合實作Ajax檔案下載功能(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板