html5大文件上传技术分享-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

html5大文件上传技术分享

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

广告：SSL证书一年128.66元起，点击购买~~~