JS-超大文件上传-如何上传文件-大文件上传?

JavaScript05

JS-超大文件上传-如何上传文件-大文件上传?,第1张

可以试试这样

前端通过 input type =  "file" 接收文件

然后使用文件的 slice 的方法对文件进行分片

将每一片提交到后台依次提交到后台,提交时通过 formData 提交,添加几个字段

(1). 这次上传文件的惟一 id

(2). 上传的状态,是开始,还是上传中,还是上传结束

(3). 分片的位置,比如是第一片,第二片

(4). 分片的数据

后端当接收到一个文件 id 的结束标识时,把对应的分片按位置数据拼接起来就行

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>upload</title><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head><body><input type="file" name="file" id="file"><button id="upload" onClick="upload()">upload</button><script type="text/javascript">var bytesPerPiece = 1024 * 1024// 每个文件切片大小定为1MB . var totalPieces//发送请求 function upload() { var blob = document.getElementById("file").files[0]var start = 0var endvar index = 0var filesize = blob.sizevar filename = blob.name//计算文件切片总数 totalPieces = Math.ceil(filesize / bytesPerPiece)while(start <filesize) { end = start + bytesPerPieceif(end >filesize) { end = filesize} var chunk = blob.slice(start,end)//切割文件 var sliceIndex= blob.name + indexvar formData = new FormData()formData.append("file", chunk, filename)$.ajax({ url: 'http://localhost:9999/test.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false, }).done(function(res){ }).fail(function(res) { })start = endindex++} } </script></body></html>