java 上传大文件以及文件夹

文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦、缺乏交互、用户体验差。

一、前端代码

英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用HTML5的API,对文件上传进行渐进式增强:

    * iframe上传
   * ajax上传
   * 进度条
   * 文件预览
   * 拖放上传

1.1 传统形式

  文件上传的传统形式,是使用表单元素file,参考 http://www.ruanyifeng.com/blog/2012/08/file_upload.html :

  
     
    
  

所有浏览器都支持上面的代码,点击上传按钮后,网页"锁死",用户只能等待上传结束,然后浏览器刷新,跳到表单的action属性指定的网址。

1.2 iframe上传

  用户点击submit时,动态插入一个iframe元素

var form = $("#upload-form");

  form.on('submit',function() {

    // 此处动态插入iframe元素

  });

  var seed = Math.floor(Math.random() * 1000);

  var id = "uploader-frame-" + seed;

  var callback = "uploader-cb-" + seed;

  var iframe = $('