Maison > Article > interface Web > Partage de technologie de téléchargement de fichiers volumineux HTML5

Partage de technologie de téléchargement de fichiers volumineux HTML5

墨辰丷original: 2018-05-10 17:35:353368parcourir

Cet article présente principalement comment implémenter la technologie de téléchargement de fichiers volumineux en HTML5. J'aimerais le partager avec vous pour votre référence.

Le code est le suivant :

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

Recommandations associées :

Comment utiliser Ajax pour implémenter la fonction de téléchargement de fichiers volumineux

Partage de code de téléchargement de fichiers volumineux JS et WebService

Que dois-je faire si le téléchargement de fichiers volumineux PHP échoue ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Production H5 d'une interface de connexion simpleArticle suivant：Production H5 d'une interface de connexion simple

Articles Liés

Voir plus