首页 > 网络编程 > AJAX相关 > 正文

SpringMVC+Ajax实现文件批量上传和下载功能实例代码_AJAX相关

2018-12-10 21:32:08

今天做了文件的上传下载,小小总结一下,基本的web项目建立及SpringMVC框架搭建此处不详细写出来了。

上传form:

<form id="uploadfiles" enctype="multipart/form-data">    <input type="file" multiple="multiple" id="file_upload" name="file_upload" />     <input type="button" value="上传" onclick="upload()" /></form>

上传Ajax:

<script type="text/javascript">/* * 上传文件 */function upload(){  var formData = new FormData($( "#uploadfiles" )[0]);   $.ajax({      type: "post",      url: "./path/upload",      dataType: "json",      data: formData,      /**         *必须false才会自动加上正确的Content-Type         */       contentType : false,       /**         * 必须false才会避开jQuery对 formdata 的默认处理         * XMLHttpRequest会对 formdata 进行正确的处理         */       processData : false,      success: function(data){//从后端返回数据进行处理       if(data){         alert("上传成功!");       }else{         alert("上传失败!");       }      },      error: function(err) {//提交出错        $("#msg").html(JSON.stringify(err));//打出响应信息        alert("服务器无响应");       }     });}</script>

spring.xml配置加上:

<!-- 配置文件上传 -->  <bean id="multipartResolver"    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    <!-- 默认编码 -->    <property name="defaultEncoding" value="utf-8" />    <!-- 文件大小最大值 -->    <property name="maxUploadSize" value="10485760000" />    <!-- 内存中的最大值 -->    <property name="maxInMemorySize" value="40960" />  </bean>controller:/*   * 上传多个文件   */  @RequestMapping(value = "/upload", produces = "application/json;charset=UTF-8")  public @ResponseBody  boolean uploadFiles(@RequestParam("file_upload") MultipartFile [] files) {    boolean result = false;    String realPath;    for(int i=0;i<files.length;i++){      if (!files[i].isEmpty()) {           String uniqueName=files[i].getOriginalFilename();//得到文件名          realPath="E:"+File.separator+uniqueName;//文件上传的路径这里为E盘          files[i].transferTo(new File(realPath));  // 转存文件          result = true;              } catch (Exception e) {           e.printStackTrace();         }       }    }    return result;  }

下载的jsp页面代码根据需求不同自己设计,这里给出controller代码:

/*   * 下载多个文件   */  @RequestMapping(value = "/download")  public void downloadFiles(HttpServletResponse response) {    String str= request.getParameter("rows");//下载文件信息,包括文件名、存储路径等    JSONArray path=(JSONArray) JSONArray.parse(request.getParameter("rows"));    Path paths[]=new Path[path.size()];    paths = JSONArray.parseArray(str, Path.class).toArray(paths);    String uri = "d:"+ File.separator + "mldn.zip";//临时文件存储路径    File zipFile = new File(uri) ;  // 定义压缩文件名称     ZipOutputStream zipOut = null;// 声明压缩流对象     InputStream input = null;    //将要压缩的文件加入到压缩输出流中    try {      zipOut = new ZipOutputStream(new FileOutputStream(zipFile));    } catch (FileNotFoundException e) {      e.printStackTrace();    }    for(int i = 0;i<paths.length;i++){      File file = new File(paths[i].getUri()+File.separator+paths[i].getFilename());      try {        input = new FileInputStream(file) ;// 定义文件的输入流         zipOut.putNextEntry(new ZipEntry(file.getName())) ; // 设置ZipEntry对象       } catch (Exception e) {        e.printStackTrace();      }     }    //将文件写入到压缩文件中    int temp = 0 ;     try {      while((temp=input.read())!=-1){ // 读取内容         zipOut.write(temp) ;  // 写到压缩文件中       }    } catch (IOException e) {      e.printStackTrace();    }finally{       try {        input.close() ;        zipOut.close() ;       } catch (IOException e) {        e.printStackTrace();      }     }    try {      // 以流的形式下载文件。      BufferedInputStream fis = new BufferedInputStream(new FileInputStream(zipFile));      byte[] buffer = new byte[fis.available()];      fis.read(buffer);      fis.close();      // 清空response      response.reset();      OutputStream toClient = new BufferedOutputStream(response.getOutputStream());      response.setContentType("application/x-msdownload;");       response.setHeader("Content-Disposition", "attachment;filename=" + zipFile.getName());      toClient.write(buffer);      toClient.flush();      toClient.close();      zipFile.delete();    //将生成的服务器端文件删除    }     catch (IOException ex) {      ex.printStackTrace();    }    }

将多个文件打成一个压缩包下载,然后将生成的临时压缩文件删除。

下载页面如果用Ajax提交请求的话要注意:ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据。

例子:

function download(){    var form=$("<form>");//定义一个form表单    form.attr("style","display:none");    form.attr("target","");    form.attr("method","post");    form.attr("action","./path/download");//请求url    var input1=$("<input>");    input1.attr("type","hidden");    input1.attr("name","rows");//设置属性的名字    input1.attr("value",“test”);//设置属性的值    $("body").append(form);//将表单放置在web中    form.append(input1);    form.submit();//表单提交                     }

总结

以上所述是小编给大家介绍的SpringMVC+Ajax实现文件批量上传和下载功能实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

  • 相关标签:AJAX相关
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • 曝网友假装外国人写投诉信 ofo秒退押金并回函致歉
  • 苹果市值缩水逾2000亿美元 遭多家投行下调目标价
  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程