html5如何實現(xiàn)上傳大文件技術(shù)

發(fā)布時間：2021-09-13 14:56:11 來源：億速云閱讀：122 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“html5如何實現(xiàn)上傳大文件技術(shù)”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5如何實現(xiàn)上傳大文件技術(shù)”這篇文章吧。

代碼如下：

<!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>

以上是“html5如何實現(xiàn)上傳大文件技術(shù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

html5如何實現(xiàn)上傳大文件技術(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽