首先說分片上傳，我們在進行文件上傳的時候，因為服務器的限制，會限制每一次上傳到服務器的文件大小不會很大，這個時候我們就需要把一個需要上傳的文件進行切割，然后分別進行上傳到服務器。
假如需要做到這一步，我們需要解決兩個問題：
- 怎么切割?
- 怎么得知當前傳輸的進度?
首先解決怎么切割的問題。因為File文件對象是繼承於Blob對象的，因此File文件對象也擁有slice這個方法，我們可以使用這個方法將任何一個File文件進行切割。
slice用於文件分片上傳：
（1）分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
（2）當網絡問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
具體看代碼：
<!DOCTYPE html>
<html lang="en">
<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 = 0; var end; var index = 0; var filesize = blob.size; var filename = blob.name; //計算文件切片總數
totalPieces = Math.ceil(filesize / bytesPerPiece); while(start < filesize) { end = start + bytesPerPiece; if(end > filesize) { end = filesize; } // 匹配最后一個分片的情況
var chunk = blob.slice(start,end);//切割文件
var sliceIndex= blob.name + index; var formData = new FormData(); formData.append("file", chunk, sliceIndex); $.ajax({ url: 'http://localhost:9999/test.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false, }).done(function(res){ }).fail(function(res) { }); start = end; index++; } } </script>
</body>
</html>
此外還有常說的斷點續傳。
說下簡單思路：
1、拿到文件，保存文件唯一標識，如md5；
2、切割文件，分段上傳；
3、每次上傳一段，根據唯一性標識判斷文件上傳進度，直到文件的全部片段上傳完畢。