html5前端大文件上传,纯 js 来实现大文件的分片上传

已有轮子

http://fex.baidu.com/webuploader/

原理

前端通过file.slice对文件做切割，后端拼接。

简单实现

用别人的代码做了下实验，https://www.cnblogs.com/fjzhang/p/7227401.html

分片上传，这样就不用担心服务器请求超时了。

前端页面

立即提交

var element = layui.element;

var time = new Date().getTime();

var upload = function (file, num) {

var formData = new FormData();

var blockSize = 1024 * 1000;

var blockNum = Math.ceil(file.size / blockSize);

var nextSize = Math.min(num * blockSize, file.size);

var fileData = file.slice((num - 1) * blockSize, nextSize);

formData.append("file", fileData);

formData.append("fileName", file.name + time);

$.ajax({

url: "/admin/op/seoAsk?action=fileUpload",

type: "POST",

data: formData,

processData: false,

contentType: false,

success: function (responseText) {

element.progress('demo', ((num * 100) / blockNum) + '%');

if (file.size <= nextSize) {

layer.msg("上传成功");

return;

}

upload(file, ++num);//递归调用

}

});

};

$(".btnFile").click(function () {

var file = $("#file")[0].files[0];

upload(file, 1);

});

后端实现

$file = isset($_FILES['file']) ? $_FILES['file']:null; //分段的文件

if (!isset($_POST['fileName'])) {

echo 'failed';

}

$filename = str_replace(["..","/"."\\"],"",$_POST['fileName']);

$content = file_get_contents($file['tmp_name']);

if (!file_put_contents($name, $content, FILE_APPEND)) {

echo 'failed';

}

优化与改进

鉴权

断点续传

多线程上传

我设想的一个思路：

第一步，客户端发送身份+文件 md5，以及该文件的总分片数。身份可以是登录用户的 uid。

第二步，服务端返回该文件已经上传了的分片索引数组，这样就可以可以实现断点续传。我们设定分片大小是固定的，如果文件 md5 不变，那么它分片的结果也不会变。

第三步，前端根据后端返回的分片索引来并行的上传文件，而不需要像上面那样同步递归。

第四步，服务端收到分片根据客户端身份和文件 md5来进行文件合并。当分片到达首次传输过来的该文件对应的总分片数时才合并。