1. 程式人生 > >js分片上傳大文件,前端代碼

js分片上傳大文件,前端代碼

asc 代碼 firmware ceil 發送 內存 ref war 上傳文件

首先導入jQuery.form.js文件,下面src是相對於改js文件位置,

<script type="text/JavaScript" src="jquery/jquery-form.js"></script>

<script type="text/javascript">
var BYTES_PER_CHUNK = 1024 * 1024; // 每個文件切片大小定為1MB .
var slices;
var totalSlices;

//發送請求
function sendRequest() {
var blob = document.getElementById("file").files[0];
var start = 0;
var end;
var index = 0;


// 計算文件切片總數
slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
totalSlices= slices;
while(start < blob.size) {
end = start + BYTES_PER_CHUNK;
if(end > blob.size) {
end = blob.size;
}
uploadFile(blob, index, start, end);
start = end;
index++;
if ( index>=totalSlices )
location="reboot.htm";
}
}

//上傳文件
function uploadFile(blob, index, start, end) {
var xhr;
var fd;
var chunk;
var sliceIndex=blob.name+index;
chunk =blob.slice(start,end);//切割文件
fd = new FormData();
fd.append("UpgradeFileName", chunk, sliceIndex);
var xhr = new XMLHttpRequest();
xhr.open(‘POST‘, ‘cmd.cgi?cmd_tag=firmware_upgrade&group_tag=upgrade‘, false);//false指同步上傳,因為我的服務器內存較小,選擇同步,如果追求速度,可以選擇 //ture,異步上傳
xhr.send(fd);
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
setTimeout("",10);
}else{
uploadFile(blob, index, start, end);
}
}
</script>

js分片上傳大文件,前端代碼