当前位置 博文首页 > 利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

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

    作者:chentging 时间:2021-09-22 19:03

    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" > <br>
      <input type="file" > <br>
      <input type="button"  value="上载" >
      <div ></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文件下载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站长博客网站的支持!

    jsjbwy
    下一篇:没有了