js html5 获取文件md5,js大文件分段上传并获取文件md5

spark MD5 & chunk upload file test

模拟分段上传

---

console.log("page loaded");

// var theFile;

// $("#chunkFile").on('change',function(e){

// theFile = e.target.files[0] || e.dataTransfer.files[0] || $(this)[0].files[0];

// console.log(theFile);

// })

var chunkFileObj = {

constructor: chunkFileObj,

fileDOM:"#chunkFile",

preImgDOM:"#imgpreview",

defaultPreImgUrl:"./default.svg",

uploadedCK:0,//has uploaded chunk

FILE:{

file:'',

name:'',

size:'',

type:'',

dataURL:'',

md5Code:'',

md5Percent:0,

},

CK:{

csize:2*1024*1024,

ck:'',

currCK:0,

CKs:0,

cstart:0,

cend:0

},

CKForm:[],

init:function(){

var _this = this;

$(_this.fileDOM).on('change',function(e){

_this.FILE.file = e.target.files[0] || e.dataTransfer.files[0] || $(_this.fileDOM)[0].files[0];

_this.FILE.name = _this.FILE.file.name;

_this.FILE.size = _this.FILE.file.size;

_this.FILE.type = _this.FILE.file.type;

_this.CK.CKs = Math.ceil(_this.FILE.size/_this.CK.csize);

_this.CK.currCK = 0;

_this.CK.cstart = _this.CK.currCK * _this.CK.csize;

_this.CK.cend = _this.CK.cstart + _this.CK.csize;

console.log('_this.FILE:',_this.FILE);

console.log('_this.chunk:',_this.CK);

_this.createFile();

})

},

createFile:function(){

// var text = SparkMD5.hash("123")

// console.log(text);

var _this = this;

var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;

var spark = new SparkMD5.ArrayBuffer();

var fileReader = new FileReader();

// continue reading next chunk

function loadNextChunk(){

_this.CK.cstart = _this.CK.currCK * _this.CK.csize;

_this.CK.cend = (_this.CK.cstart + _this.CK.csize)>_this.FILE.size?_this.FILE.size:(_this.CK.cstart + _this.CK.csize);

var item = {

'chunk_num' :_this.CK.CKs,

'chunk_index':_this.CK.currCK+1,

'file_md5':_this.FILE.md5Code,

'file_name':_this.FILE.name,

'file_type':_this.FILE.type,

'file_size':_this.FILE.size,

'file_blob':blobSlice.call(_this.FILE.file, _this.CK.cstart, _this.CK.cend)

}

_this.CKForm.push(item);

if(/(image)/.test(_this.FILE.type)&&_this.CK.currCK==0){

_this.readFileAsURL();

}else{

if(_this.CK.currCK==0){

$(_this.preImgDOM).attr("src",_this.defaultPreImgUrl)

}

let ckfile = blobSlice.call(_this.FILE.file, _this.CK.cstart, _this.CK.cend);

fileReader.readAsArrayBuffer(ckfile);

}

}

loadNextChunk();

// when every chunk onloaded do something

fileReader.onload = function(e){

_this.CK.currCK++;

_this.FILE.md5Percent = ((_this.CK.currCK/_this.CK.CKs)*100).toFixed(2);

spark.append(e.target.result);

if(_this.CK.currCK<_this.ck.cks>

_this.setVal("#hashcode","加密中："+_this.FILE.md5Percent+"%");

loadNextChunk();

}else{

// when the last chunk let's end this party

_this.FILE.md5Code = spark.end();

_this.setVal("#hashcode","加密100%："+_this.FILE.md5Code);

console.log('hashCode:',_this.FILE.md5Code);

console.log('CKForm:',_this.CKForm);

}

}

},

/**

* 图片文件 生成预览图

* @return {[type]} [description]

*/

readFileAsURL:function(){

var fileReader = new FileReader();

fileReader.readAsDataURL(this.FILE.file);

fileReader.onload = function(e){

$(this.preImgDOM).attr("src",e.target.result)

}

},

doUploadByFormData:function(i){

console.log(i)

var _this = this;

var fd = new FormData();

fd.append('chunk_num',this.CKForm[i].chunk_num);

fd.append('chunk_index',this.CKForm[i].chunk_index);

fd.append('file_md5',this.CKForm[i].file_md5);

fd.append('file_name',this.CKForm[i].file_name);

fd.append('file_type',this.CKForm[i].file_type);

fd.append('file_size',this.CKForm[i].file_size);

fd.append('file_blob',this.CKForm[i].file_blob);

console.log("上传第"+this.uploadedCK+"块数据:",fd.get("chunk_index"));

var jqxhr = $.post("http://www.w3school.com.cn/ajax/gethint.asp?q=a&sid=0.38385258912126274", fd , function() {

alert("success");

})

.success(function() {

if(i<_this.ck.cks>

_this.doUploadByFormData(i+1);

}

})

.error(function(err) {

console.log("error:"+err);

if(i<_this.ck.cks>

_this.doUploadByFormData(i+1);

}

})

.complete(function() { console.log("complete"); });

},

setVal:function(dom,val){

$(dom).html(val);

},

testUpload:function(){

var _this = this;

for (var i = 0; i < this.CKForm.length; i++) {

(function(i){

setTimeout(function(){

_this.uploadedCK++;

_this.doUploadByFormData(i)

},1000*i)

})(i);

}

}

}

var fileObj = chunkFileObj;

fileObj.init();