html5大文件上传技术分享

前端开发教程 2025-01-12 0

这篇文章主要介绍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>

相关推荐：

怎么用ajax如何实现大文件上传的功能

JS和WebService大文件上传代码分享

php大文件上传失败该怎么办？

以上就是html5大文件上传技术分享的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。