登录  /  注册
首页 > web前端 > js教程 > 正文

Ajax怎么实现文件批量上传与下载

php中世界最好的语言
发布: 2018-03-30 16:59:45
原创
2703人浏览过

这次给大家带来Ajax怎么实现文件批量上传与下载,Ajax实现文件批量上传与下载的注意事项有哪些,下面就是实战案例,一起来看一下。

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

上传form:

登录后复制
          

上传Ajax:

<script>
/*
 * 上传文件
 */
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>
    <!-- 默认编码 -->
    <property></property>
    <!-- 文件大小最大值 -->
    <property></property>
    <!-- 内存中的最大值 -->
    <property></property>
  </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><p style="text-align: left;">下载的jsp页面代码根据需求不同自己设计,这里给出controller代码:</p>
<pre class="brush:php;toolbar:false">/*
   * 下载多个文件
   */
  @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><p style="text-align: left;">将多个文件打成一个压缩包下载,然后将生成的临时压缩文件删除。</p><p style="text-align: left;">下载页面如果用Ajax提交请求的话要注意:ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行<a href="http://www.php.cn/code/12666.html" target="_blank">文件下载</a>。但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据。</p><p style="text-align: left;">例子:</p><pre class="brush:php;toolbar:false">function download(){
    var form=$("
登录后复制
");//定义一个form表单     form.attr("style","display:none");     form.attr("target","");     form.attr("method","post");     form.attr("action","./path/download");//请求url     var input1=$("");     input1.attr("type","hidden");     input1.attr("name","rows");//设置属性的名字     input1.attr("value",“test”);//设置属性的值     $("body").append(form);//将表单放置在web中     form.append(input1);     form.submit();//表单提交                      }

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

实现无刷新下拉联动的Ajax+Servlet(附代码)

怎样用Ajax异步检查用户名有无重复

以上就是Ajax怎么实现文件批量上传与下载的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号