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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！