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

来源：互联网发布：淘宝正品运动鞋货源编辑：程序博客网时间：2024/06/14 21:47
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>spark MD5 & chunk upload file test</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="spark-md5.min.js"></script></head><body> <input type="file" name="file" id="chunkFile"><button onclick="fileObj.doUploadByFormData(0)">模拟分段上传</button><br><hr/><p id="hashcode"></p><img src="" id="imgpreview"><script type="text/javascript">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 chunkFILE:{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 chunkfunction 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 somethingfileReader.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();</script></body></html>
阅读全文
0 0