本页二维码,扫一扫分享到朋友圈
朋友圈

js使用FileReader和Google的md5.js计算文件的MD5值


阅读152 评论0 赞 23返回首页    go 编程与技术  go javascript


  1. <body>  

  2.     <input id="input_md5" type="file" multiple="multiple"></input>  

  3.       

  4.     <div class="progress progress-striped active progress-success">  

  5.           <div id="div_load" style="width: 40%" class="bar"></div>  

  6.     </div>  

  7.       

  8.     <div id="md5_show"></div>  

  9. </body>  

  10.   

  11. <script type="text/javascript">  

  12.   

  13.     var message = [];  

  14.       

  15.     if(!document.getElementById("input_md5").files){  

  16.         message = '<p>浏览器不支持FileReader API</p>';    

  17.         document.querySelector("body").innerHTML = message;  

  18.     }else{  

  19.         document.getElementById('input_md5').addEventListener('change', handleFileSelection, false);  

  20.     }  

  21.       

  22.     function handleFileSelection(event) {  

  23.         var files = event.target.files;  

  24.         if(!files){  

  25.               msa.alert("<p>At least one selected file is invalid - do not select any folders.</p><p>Please reselect and try again.</p>");    

  26.               return;  

  27.         }  

  28.           

  29.         var file = files[0];  

  30.           

  31.         var chunkSize = 204800;  

  32.         var pos = 0;  

  33.           

  34.         var md5Instance = CryptoJS.algo.MD5.create();  

  35.           

  36.         var reader = new FileReader();  

  37.         function progressiveReadNext(){  

  38.             var end = Math.min(pos + chunkSize, file.size);  

  39.   

  40.             reader.onload = function(e) {  

  41.                 pos = end;  

  42.                 md5Instance.update(CryptoJS.enc.Latin1.parse(e.target.result));  

  43.                 var present = (parseFloat(pos)/parseFloat(file.size))*10000/100;  

  44.                 $("#div_load").css("width",Math.round(present) +"%");  

  45.                 if (pos < file.size) {  

  46.                     progressiveReadNext();  

  47.                 } else {  

  48.                     var md5Value = md5Instance.finalize();  

  49.                     console.log(md5Value.toString());  

  50.                     $("#md5_show").html(md5Value.toString());  

  51.                       

  52.                 }  

  53.             }  

  54.   

  55.             if (file.slice) {  

  56.                 var blob = file.slice(pos, end);  

  57.             } else if (file.webkitSlice) {  

  58.                 var blob = file.webkitSlice(pos, end);  

  59.             }else if(File.prototype.mozSlice){  

  60.                 var blob = file.mozSlice(pos, end);  

  61.             }  

  62.             reader.readAsBinaryString(blob);  

  63.         }  

  64.         progressiveReadNext();  

  65.     }  

  66. </script> 


  下一篇:go 简单的ajax轻库


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:04-21