互聯網 - 大數據

分塊傳輸的原理就是利用HTML5新增的文件slice截取函數。

代碼如下：

html：

<input id="f" type="file" name="part" onchange="writeFile()">

JS：

核心部分已經加粗顯示了，其他部分不用看，因為實現的方式有很多種，不一定要按照我的方式去寫，但是核心是不會變的。

var writeFile = function(){
　　var temp = null;
　　var formData = null;
　　var xhr = null;

　　var file = document.getElementById('f');
　　var f = file.files[0];
　　var totalSize = f.size;

　　// 每次截取的大小
　　var num = 1024*1024;

　　var start = 0;
　　var end = start + num;

　　// 發送到的地址
　　var url = 'http://127.0.0.1/index.php';

　　// 進度條
　　var loaded = function(bili){
　　　　console.log(bili);
　　};

　　writeFile = function(){
　　　　// 如果已經截取完了跳出這個函數。
　　　　if(start>=totalSize)return;

　　　　// 截取文件
　　　　temp = f.slice(start,end);

　　　　formData = new FormData();
　　　　formData.append(file.name,temp);

　　　　xhr = new XMLHttpRequest();
　　　　xhr.open('POST',url);

　　　　xhr.onreadystatechange = function(){
　　　　　　if(this.readyState===4 && this.status===200){
　　　　　　　　// 改變下一次截取的位置
　　　　　　　　start = end;
　　　　　　　　end = start + num;
　　　　　　　　// 因為截取可能超過totalSize，判斷最后一次截取是否大于totalSize如果大于就直接讓end等于totalSize
　　　　　　　　if(end>totalSize){
　　　　　　　　　　end = totalSize;
　　　　　　　　}
　　　　　　　　// 可以用這個做進度條
　　　　　　　　loaded((start/totalSize)*100);
　　　　　　　　// 遞歸，如果文件沒有截取完，繼續截取
　　　　　　　　writeFile();
　　　　　　}
　　　　};
　　　　xhr.send(formData);
　　};

　　// 調用一下
　　writeFile();
};

當然除了這些還是不夠的，后端也是需要處理一下的，因為現在發送過去的文件是一塊一塊的，所有需要合并一下，不過已經和前端沒有關系了，但我還是給出代碼吧。

<?php

// 判斷是否有這個文件
if(!file_exists('./a/up.wmv')){

　　//創建一個文件
　　move_uploaded_file($_FILES['part']['tmp_name'],'./a/up.wmv');
}else{

　　//將前面的那個文件和當前這個文件合并，FILE_APPEND把當前這個內容追加上去。
　　file_put_contents('./a/up.wmv',file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);
　　echo 'ok';
}

?>