집 > 기사 > 웹 프론트엔드 > HTML5 대용량 파일 업로드 기술 공유

HTML5 대용량 파일 업로드 기술 공유

墨辰丷원래의: 2018-05-10 17:35:353368검색

이번 글은 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=&#39;width:500px;margin-top:20px&#39;></progress>  
               <div style=&#39;margin-top:20px&#39;>  
                   <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(&#39;read chunk nr&#39;, currentChunk + 1, &#39;of&#39;, 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(&#39;oops, something went wrong.&#39;);  
           };  
           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(&#39;fileinput&#39;)  
       uploadfile.onchange = function(e){  
           var file = this.files[0];  
            if(!file) {  
               alert(&#39;请选择文件！&#39;);  
               return false;  
           }  
           get_filemd5sum(file)  
       }  
   </script>  
</body>
</html>

관련 추천:

Ajax를 사용하여 대용량 파일 업로드 기능을 구현하는 방법

JS 및 WebService 대용량 파일 업로드 코드 공유

PHP 대용량 파일 업로드에 실패하면 어떻게 해야 하나요?

위 내용은 HTML5 대용량 파일 업로드 기술 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：H5 간편 로그인 인터페이스 제작다음 기사：H5 간편 로그인 인터페이스 제작