js大文件分段上传并获取文件md5_js 文件过大,分段读取文件-CSDN博客

本文链接：https://blog.csdn.net/Loving_M/article/details/78425069
<!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 οnclick="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 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();


	</script>
</body>
</html>