利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

所属分类: 网络编程 / AJAX相关 阅读数: 829
收藏 0 赞 0 分享

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>

1.绑定事件到按钮

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

2.获取文件

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

3.创建内存中的表单对象,并添加向服务器传输的数据

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

4.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("成功!"); 
    }
  }
});

5.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);
  }

以上所述是小编给大家介绍的利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

ajax和jsonp跨域的原理本质详解

跨域问题是我们在开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于ajax和jsonp跨域的原理本质,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
收藏 0 赞 0 分享

ajax获取json数据为undefined原因分析

Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。这篇文章主要介绍了ajax获取json数据为undefined--原因,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)

下面小编就为大家分享一篇ajax实现用户名校验的传统和jquery的$.post方式的实例讲解,具有很好的参考价值,希望对大家有所帮助
收藏 0 赞 0 分享

ajax中用josnp接收josn数据的实现方法

下面小编就为大家分享一篇ajax中用josnp接收josn数据的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

ajax跨域获取网站json数据的实例

下面小编就为大家分享一篇ajax跨域获取网站json数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

关于前端ajax请求的优雅方案(http客户端为axios)

这篇文章主要给大家介绍了关于前端ajax请求的优雅方案,本文http客户端为axios,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
收藏 0 赞 0 分享

快速解决ajax请求出错状态码为0的问题

下面小编就为大家分享一篇快速解决ajax请求出错状态码为0的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

ajax实现改变状态和删除无刷新的实例

下面小编就为大家分享一篇ajax实现改变状态和删除无刷新的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

ajax结合mysql数据库和smarty实现局部数据状态的刷新方法

下面小编就为大家分享一篇ajax结合mysql数据库和smarty实现局部数据状态的刷新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Ajax客户端异步调用服务端的实现方法(js调用cs文件)

下面小编就为大家分享一篇Ajax客户端异步调用服务端的实现方法(js调用cs文件),具有很好的参考价值,希望对大家有所帮助
收藏 0 赞 0 分享
查看更多