[2019-06-19 17:44:59 最后更新]
[js/javascript]h5断点上传及分块上传的原理
网上的教程写得云里雾里
其实最关键的就是两个技术点:
1.是对应标签为 <input> 的 file 对象,取它的 files 属性 进行操作即可.例如
<input id="file-upload" type="file" name="file">
fileupload = document.getElementById('file-upload');
...
if (fileupload.files.length>0) {
fileupload.value = '';
}
...
这时的 input 是可以通过加些属性来取多个文件的,所以一般是取 fileupload.files[0] 作为要上传的对象.当然要同时传多个文件的话就要遍历了.
2.用 FormData 对象来上传 files[0] 的一部分内存内容,例如
var formData = new FormData();
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/octet-stream");
var filesize = fileObj.size;
var blob = fileObj.slice(start_offset,filesize); //这个是分块上传的关键
var fileOfBlob = new File([blob], fileObj.name);
//附加的文件数据应该放在请求的前面
formData.append('filename', fileObj.name);
//必须将fileid信息传送给服务器，服务器只有在获得了fileid信息后才对文件做断点续传处理
formData.append('fileid', fileid);
//请将文件数据放在最后的域
//formData.append("file",blob, fileObj.name);
formData.append('file', fileOfBlob);
xhr.open('POST', upload_file_url);
//
xhr.send(formData);
就是这么简单,服务器还是要做较多的配合工作的.
