js實現文件分段上傳

/**
 * 上傳接口相關的方法 注意callback函數必須是如下定義 function(status,data,error)
 * 其中data的數據格式爲JSon,包含的字段有fn,fpath,progress
 * 取值即可爲data.fn,data.fpath等,其中progress表示進度
 * 其中status取值如下:
 * 200,則爲上傳中,進度會一直變化,當data.progress>=100時,代表已經上傳完畢,此時data.fn,data.fpath的值纔有意義
 * 201:網絡錯誤,一般指host不正確等請求錯誤
 * 202:文件不正確,服務端異常
 * 203:太小的文件沒必要用這個方法上傳
 * 204:參數錯誤,比如file爲空等
 * 205:取消了上傳
 * @param host
 *            請求上傳文件的host,例如:http://192.168.0.101:8080/rwx
 * @param filename
 *            需要上傳的文件名
 * @param file
 *            需要上傳的文件
 * @param callback
 *            回調函數,如function(status,progress,error)
 */

var starttime=0;
var fileuploadcancle = false;
function uploadFile(host, filename, file, token, callback) {
	if(!host||!filename||!token||!callback){
		callback(204, null,"error");
		return ;
	}
	
	var rurl = host + "/file/upload/2";
	var tmp={};
	tmp.fn ='';
	tmp.fpath='';
	tmp.progress=0;
	tmp.rate=0;
	if (file.size < 30720) {
		// 直接上傳
		callback(203, tmp, "small");
		return;
	}
	var formData = new FormData();
	var blockSize = 1024;
	var fz = parseInt(file.size / 2);
	console.log('fz:'+fz);
	var fileData1 = file.slice(0, blockSize);
	var fileData2 = file.slice(fz, fz + blockSize);
	var fileData3 = file.slice(file.size - blockSize, file.size);
	formData.append("file1", fileData1);
	formData.append("file2", fileData2);
	formData.append("file3", fileData3);
	formData.append("fileName", filename);
	formData.append("filesize", file.size);
	fileuploadcancle =false;
	$.ajax({
		url : rurl,
		type : "POST",
		data : formData,
		headers : {
			'FDToken' : token
		},
		processData : false,
		contentType : false,
		success : function(data) {
			if (data.status == 200) {
				starttime = (new Date()).valueOf();
				callback(200, tmp, data.msg);
				uploadFilenext(data.h, data.fn,data.fpath, data.ps, 0, data.pn, file,
						token, callback,data.furl)
			}else{
				callback(202, tmp, data.msg);
			}
		},
		error : function(data) {
			callback(201, tmp, "net error");
		}
	});
}

function uploadFilenext(host, filename,filepath, bs, bi, total, file, token, callback,downurl) {
	var formData = new FormData();
	var nextSize = Math.min((bi + 1) * bs, file.size);
	var fileData1 = file.slice(bi * bs, nextSize);
	formData.append("file1", fileData1);
	formData.append("fileName", filename);
	formData.append("filesize", file.size);
	formData.append("fz", bi);
	formData.append("fs", bs);
	var rurl = host + "/file/upload/3";
	$.ajax({
		url : rurl,
		type : "POST",
		data : formData,
		headers : {
			'FDToken' : token
		},
		processData : false,
		contentType : false,
		success : function(data) {
			var tmp={};
			tmp.fn ='';
			tmp.fpath='';
			tmp.progress=0;
			tmp.rate=0;
			tmp.downurl='';
			if (data.status == 200) {
				var end = (new Date()).valueOf();
				tmp.rate = parseInt(nextSize/(end-starttime));
				if (file.size <= nextSize) {
					tmp.fn =filename;
					tmp.fpath=filepath;
					tmp.progress=100;
					tmp.downurl=downurl;
					callback(200, tmp, data.msg);
					return;
				}else{
					tmp.progress=parseInt((nextSize-bs)/file.size*100);
					callback(200, tmp, data.msg);
				}
				if(fileuploadcancle){
					//應該要通知服務端  //後續處理
					callback(205, tmp, data.msg);
				}else{
					uploadFilenext(host, filename,filepath, bs, ++bi, total, file, token,
							callback,downurl);
				}
			}else{
				tmp.progress=parseInt((nextSize-bs)/file.size*100);
				callback(202, tmp, data.msg);
			}
		},
		error : function(data) {
			var tmp={};
			tmp.fn ='';
			tmp.fpath='';
			tmp.progress=parseInt((nextSize-bs)/file.size*100);
			callback(201, tmp, "net error");
		}
	});
}

取消上傳

function cancelUpload(filename,file){
	fileuploadcancle=true;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章