html5大文件上传技术分享

互联网 18-5-10

这篇文章主要介绍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大文件上传技术分享的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：分享