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文件上载功能的更多相关文章

  1. 【Spring学习笔记-MVC-5】利用spring MVC框架,实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  2. Spring MVC Controller与jquery ajax请求处理json

    在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: "}]}]} $.ajax({ url : url, typ ...

  3. SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选、检索功能(maven)

    SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选.检索功能(maven) 本篇是新建的一个数据库,新建的一个完整项目. 本篇内容: (1)使用 Spri ...

  4. 利用maven构建一个spring mvc的helloworld实例

    刚开始学习maven和spring mvc,学的云里雾里的 这里提供一个hello world实例,记录自己的学习之路 首先看maven官网的介绍 Apache Maven is a software ...

  5. 利用 FormData 对象发送 Key/Value 对的异步请求

    使用Key/Value对和FormData能够轻易地通过XMLHttpRequest指定要传递什么数据,它是一个非常强大的发送数据到服务器的方法. 基础 通常的方法是你创建一个 FormData 对象 ...

  6. Spring MVC使用commons fileupload实现文件上传功能

    通过Maven建立Spring MVC项目,引入了Spring相关jar依赖. 1.为了使用commons fileupload组件,需要在pom.xml中添加依赖: <properties&g ...

  7. Spring MVC 框架的架包分析,功能作用,优点

    由于刚搭建完一个MVC框架,决定分享一下我搭建过程中学习到的一些东西.我觉得不管你是个初级程序员还是高级程序员抑或是软件架构师,在学习和了解一个框架的时候,首先都应该知道的是这个框架的原理和与其有关j ...

  8. spring mvc 避免IE执行AJAX时,返回JSON出现下载文件

    <!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" c ...

  9. Spring MVC 解决无法访问静态文件和"全局异常处理"

    我们都知道,Spring MVC的请求都会去找controller控制器,若果我们页面中引入了一个外部样式,这样是没效果的, 我们引入样式的时候是通过<like href="...&q ...

随机推荐

  1. python学习好文

    摘要: 学习别人的学习历程. 一 iTech的博客 http://www.cnblogs.com/itech/archive/2011/01/31/1948265.html

  2. 有关java调用批处理文件

    1 例子 java调用批处理文件 public class RunJarBat { public static void runJarBat() { // 调用控制台 Runtime rt = Run ...

  3. 11.2.0.4 RAC 手动打补丁

    1. 下载补丁和最新OPatchGI PSU : p25869727_112040_Linux-x86-64.zipOPatch : p6880880_112000_Linux-x86-64.zip ...

  4. JavaScript addEventListener 第三个参数

    先看一个完整的演示页面代码. Code <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

  5. Python网络数据采集2-wikipedia

    Python网络数据采集2-wikipedia 随机链接跳转 获取维基百科的词条超链接,并随机跳转.可能侧边栏和低栏会有其他链接.这不是我们想要的,所以定位到正文.正文在id为bodyContent的 ...

  6. python教程6-2:字符串标识符

    标识符合法性检查. 1.字母或者下划线开始. 2.后面是字母.下划线或者数字. 3.检查长度大于等于1. 4.可以识别关键字. python35 idcheck.py  idcheck.py impo ...

  7. centos7用户,组及文件权限管理

    centos7安装过程中如果没有创建用户的话,默认只有ROOT用户,这个用户是具有最高权限的帐户,可以做任何事情,但实际生产环境中我们一般不会使用这个用户,因为权限太大了,很危险. 所以在生产环境中就 ...

  8. 异步加载回来的数据不受JS控制了

    写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...

  9. 搭建ElasticSearch+MongoDB检索系统

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Apach ...

  10. web添加第三方应用,前端解决跨域问题的8种方案

    应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1. 注册成为QQ互联平台开发者,http://connect.qq.com/ 2. 准备一个可访问的域名,如dev.foo.com 3 ...