java上传⼤⽂件(局域⽹环境)
⽂件上传是最古⽼的互联⽹操作之⼀,20多年来⼏乎没有怎么变化,还是操作⿇烦、缺乏交互、⽤户体验差。
⼀、前端代码
英国程序员总结了这些,本⽂在他的基础之上,讨论在前端采⽤HTML5的API,对⽂件上传进⾏渐进式增强:
* iframe上传  * ajax上传  * 进度条  * ⽂件预览  * 拖放上传
1.1 传统形式
<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" >     <input type="file" id="upload" name="upload" /> <br />     <input type="su bmit" value="Upload" />  </form>
所有浏览器都⽀持上⾯的代码,点击上传按钮后,⽹页"锁死",⽤户只能等待上传结束,然后浏览器刷新,跳到表单的action属性指定的⽹址。
1.2 iframe上传
  ⽤户点击submit时,动态插⼊⼀个iframe元素
var form = $("#upload-form");
  ('submit',function() {
    // 此处动态插⼊iframe元素
  });
  var seed = Math.floor(Math.random() * 1000);
  var id = "uploader-frame-" + seed;
  var callback = "uploader-cb-" + seed;
  var iframe = $('<iframe id="'+id+'" name="'+id+'" >');
  var url = form.attr('action');
  form.attr('target', id).append(iframe).attr('action', url + '?iframe=' + callback);
1.3 ajax上传
  HTML5提出了XMLHttpRequest对象的,从此ajax能够上传⽂件了。这是真正的"异步上传",是将来的主流。
<('submit',function() {
    // 此处进⾏ajax上传
});
 // 检查是否⽀持FormData
  if(window.FormData) { 
    var formData = new FormData();
    // 建⽴⼀个upload表单项,值为上传的⽂件
    formData.append('upload', ElementById('upload').files[0]);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', $(this).attr('action'));
    // 定义上传完成后的回调函数
    load = function () {
      if (xhr.status === 200) {
        console.log('上传成功');
      } else {
        console.log('出错了');
      }
    };
    xhr.send(formData);
  }
1.4 进度条
  XMLHttpRequest第⼆版还定义了⼀个,可以⽤来制作进度条。
java创建文件//在页⾯中放置⼀个HTML元素progress
<progress id="uploadprogress" min="0" max="100" value="0">0</progress>
//定义进度progress事件的回调函数
 progress = function (event) {
    if (event.lengthComputable) {
      var complete = (event.loaded / al * 100 | 0);
      var progress = ElementById('uploadprogress');
      progress.value = progress.innerHTML = complete;
    }
}
⼆、后端
  Spring 框架中使⽤类似CommonsMultipartFile对象处理表⼆进制⽂件信息,细⼼地会发现在利⽤框架下封装的Multiform接⼝进⾏⽂件上传时,会先把⽂件传输⾄tomcat⼀个指定的work⽬录之下,然后再传输到指定的路径。⼩⽂件上传这个时间延迟基本上可以忽略,但是在⼤⽂件上传时,这个上传的速度就很让⼈头疼,上传过程中的进度信息⽆法访问。
  因此我们有必要从浏览器请求字节流中解析Multiform协议,实现不依靠框架内置对象,取得⽤户请求的所有数据,同时,⽤户上传的⼤⼩不受限制,⽽且在传输过程中,我们可以实时获取传输进度。
2.1 普通Post请求协议及MultiPart协议
 因为⼀次传输的⼤⽂件MultiPart数据包,字节数可能会很⼤(1G甚⾄以上),为了获取实时进度信息,以及内存开销控制,我们需要将接收过程分成多段处理,即将数据包分段循环接收(例:每次循环只接收64K数据,期间即可更新当前的进度信息)。本次我们采⽤Spring框架来实现“⼤⽂件传输”功能,要点设计结构图如下:
2.2 源码解析
Filter对象:
  ⽤于负责接收MultiPart原始数据的Filter,⽤以在Spring内置对象之前接收⽤户请求。需要在l中进⾏配置,Web启动后,
该Filter即启动,当⽤户请求到来时需要判断该MultiPart数据信息是否合法,接收并进⾏解析。
ServletInputStream/BufferedInputStream对象:
  使⽤以上两对象,可对本次请求进⾏按字节流接收。在此可创建⽐较⼩的接收缓冲区,依靠BufferedInputStream的read进⾏分段循环接收。
getBoundarySectFromBuf()函数:
  ⾃定义函数,我们需要该函数从分段缓冲区中分析可能包含的多个Form表单信息,或者部分表单信息,或者⼆进制⽂件⽚段信息。对于表单信息分析后填充表单数据结构,对于⼆进制⽂件信息需要写⽂件。该函数需要完成边接收边解析边写⽂件的重要⼯作。
ProgressInfo对象:
  进度信息类,描述了⼀次上传请求的进度信息。该对象会⽤来被客户端轮询请求,以获得当前传输⼤⽂件过程中的进度信息。FormPart对象及listFormPart集合:
  FormPart对于单个Form表单的描述。listFormPart为本次请求的全部表单描述集合。即供后续代码调⽤的全部表单项内容。Controller层getProgInfo()处理函数:
  该函数将接受来⾃浏览器的“获得进度信息请求”,并从当前ServletContext公共内存区中到与Progesss ID对应的进度信息对象ProgressInfo,以XML的形式返回给浏览器。该函数会被客户端轮询请求。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。