html5大文件上传技术分享

来源：谷吧美食网
这篇文章主要介绍html5如何实现上传大文件技术，在此分享给大家，有需要的小伙伴参考下。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
 <div> 
 <div> 
 添加文件 
 <input type="file" name="" id="fileinput"> 
 </div> 
 <progress value="0" max="100" style='width:500px;margin-top:20px'></progress> 
 <div style='margin-top:20px'> 
 <span id="handler_info" ></span> 
 </div> 
 </div> 
 <script src="Scripts/spark-md5.js"></script> 
 <script> 
 function get_filemd5sum(ofile) { 
 var file = ofile; 
 var tmp_md5; 
 var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice, 
 // file = this.files[0], 
 chunkSize = 2 * 1024 * 1024, // Read in chunks of 2MB 
 chunks = Math.ceil(file.size / chunkSize), 
 currentChunk = 0, 
 spark = new SparkMD5.ArrayBuffer(), 
 fileReader = new FileReader(); 
 fileReader.onload = function(e) { 
 // console.log('read chunk nr', currentChunk + 1, 'of', chunks); 
 spark.append(e.target.result); // Append array buffer 
 currentChunk++; 
 var md5_progress = Math.floor((currentChunk / chunks) * 100); 
 console.log(file.name + " 正在处理，请稍等," + "已完成" + md5_progress + "%"); 
 var handler_info = document.getElementById("handler_info"); 
 var progressbar = document.getElementsByClassName("progressbar")[0]; 
 handler_info.innerHTML=file.name + " 正在处理，请稍等," + "已完成" + md5_progress + "%" 
 progressbar.value =md5_progress; 
 if (currentChunk < chunks) { 
 loadNext(); 
 } else { 
 tmp_md5 = spark.end(); 
 console.log(tmp_md5) 
 handler_info.innerHTML = file.name + "的MD5值是：" + tmp_md5; 
 } 
 }; 
 fileReader.onerror = function() { 
 console.warn('oops, something went wrong.'); 
 }; 
 function loadNext() { 
 var start = currentChunk * chunkSize, 
 end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; 
 fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); 
 } 
 loadNext(); 
 } 
 var uploadfile = document.getElementById('fileinput') 
 uploadfile.onchange = function(e){ 
 var file = this.files[0]; 
 if(!file) { 
 alert('请选择文件！'); 
 return false; 
 } 
 get_filemd5sum(file) 
 } 
 </script> 
</body>
</html>