php+大文件断点上传

发表于： 2021年11月22日 2021年11月22日
分类：大文件上传控件(up6)

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

一、前端代码

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

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

1.1 传统形式

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

  <form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" >
　　　　<input type="file" id="upload" name="upload" /> <br />
　　　　<input type="submit" value="Upload" />
  </form>

所有浏览器都支持上面的代码，点击上传按钮后，网页”锁死”，用户只能等待上传结束，然后浏览器刷新，跳到表单的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 = $(‘<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能够上传文件了。这是真正的”异步上传”，是将来的主流。

form.on(‘submit’,function() {

// 此处进行ajax上传

});

// 检查是否支持FormData

if(window.FormData) {

var formData = new FormData();

// 建立一个upload表单项，值为上传的文件

formData.append(‘upload’, document.getElementById(‘upload’).files[0]);

var xhr = new XMLHttpRequest();

xhr.open(‘POST’, $(this).attr(‘action’));

// 定义上传完成后的回调函数

xhr.onload = function () {

if (xhr.status === 200) {

console.log(‘上传成功’);

} else {

console.log(‘出错了’);

}

};

xhr.send(formData);

}

1.4 进度条

XMLHttpRequest第二版还定义了一个progress事件，可以用来制作进度条。

//在页面中放置一个HTML元素progress

//定义进度progress事件的回调函数

xhr.upload.onprogress = function (event) {

if (event.lengthComputable) {

var complete = (event.loaded / event.total * 100 | 0);

var progress = document.getElementById(‘uploadprogress’);

progress.value = progress.innerHTML = complete;

}

二、后端

Spring 框架中使用类似CommonsMultipartFile对象处理表二进制文件信息，细心地会发现在利用框架下封装的Multiform接口进行文件上传时，会先把文件传输至tomcat一个指定的work目录之下，然后再传输到指定的路径。小文件上传这个时间延迟基本上可以忽略，但是在大文件上传时，这个上传的速度就很让人头疼，上传过程中的进度信息无法访问。

因此我们有必要从浏览器请求字节流中解析Multiform协议，实现不依靠框架内置对象，取得用户请求的所有数据，同时，用户上传的大小不受限制，而且在传输过程中，我们可以实时获取传输进度。

参考https://www.cnblogs.com/darkprince/p/5114936.html

2.1 普通Post请求协议及MultiPart协议

因为一次传输的大文件MultiPart数据包，字节数可能会很大(1G甚至以上)，为了获取实时进度信息，以及内存开销控制，我们需要将接收过程分成多段处理，即将数据包分段循环接收(例：每次循环只接收64K数据，期间即可更新当前的进度信息)。本次我们采用Spring框架来实现“大文件传输”功能，要点设计结构图如下：