资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/html5文件上传断点续传

html5文件上传断点续传

tianlai / 3387人阅读

摘要：最近公司要做一个上传的插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛，没做过啊。没办法，，只能去查资料了。作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。

最近公司要做一个html5上传的jquery插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛！Σ(ﾟдﾟlll)，没做过啊。没办法，(# ﾟДﾟ)，只能去查资料了。
作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。
感谢以下文章提供的思考方向：
http://www.script-tutorials.com/pure-html5-file-upload/
http://fex.baidu.com/blog/2014/04/html5-uploader/

由于传的时候不小心，文件弄错了，现在bug已修复，对不起啊大家
考虑到服务器原因现在停止上传演示页面，抱歉请大家谅解
演示地址：暂停
资源地址：我是下载地址

HTML:

</>复制代码 
  4. upload html5
  8.     
  9.         
  10.         
  11.         
  12.         
  13.         
  14.             
  15.             
  16.                 
  17.                 
  18.             
  19.             
  20.             
  21.                 
    剩余时间 | 00:00:00
  22.                 
    100k/s
  23.             
  24.             
  25.             
  26.                 
  27.                     
  28.                     
  29.                     
  30.                     
  31.                     
  32.                 
  33.                 
  34.                 
  35.             
  36.         
  37.

CSS:

style.css

</>复制代码 
  1. /*************reset****************/
  2. html{color:#333;-webkit-text-size-adjust:none;height:100%;max-height:100%;overflow: hidden;font-family: "Microsoft Yahei";}
  3. body{height: 100%;max-height:100%;overflow: hidden;}
  4. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
  5. table{border-collapse:collapse;border-spacing:0;}
  6. fieldset,img{border:0;}
  7. address,caption,cite,code,dfn,em,var,optgroup{font-style:inherit;font-weight:inherit;}
  8. del,ins{text-decoration:none;}
  9. li{list-style:none;}
  10. h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:"";}
  11. abbr,acronym{border:0;font-variant:normal;}
  12. sup{vertical-align:baseline;}
  13. sub{vertical-align:baseline;}legend{color:#000;}
  14. input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
  15. body{font-size:12px;}
  16. a{color: #333333;text-decoration: none;}
  17. a:hover{text-decoration:underline; color:#c00;}
  18. /*font*/
  19. *{
  20.     font-size: 1.05em;
  21.     color: #222;
  22.     font-family: "Microsoft Yahei";
  23. }

upload.css

</>复制代码 
  1. #upload_box{
  2.     padding:0em 1em;
  3.     padding-top:20px;
  4.     height:100%;
  5.     background: #74b1d1;
  6.     position: relative;
  7. }
  8. #upload_form{
  9.     background: #fff;
  10.     height: 80%;
  11.     padding: 1.4em 1em;
  12.     border-radius: 4px;
  13.     box-shadow: 0 1px 3px rgba(0,0,0,0.7);
  14. }
  15. #upload_form label{
  16.     font-size: 1.5em;
  17.     font-weight: bolder;
  18. }
  19. #file{
  20.     margin:20px 0;
  21.     border:1px solid #ccc;
  22.     border-radius: 5px;
  23.     padding: 0.5em;
  24.     font-size: 1.4em;
  25.     width: 90%;
  26. }
  27. #submit,#clear{
  28.     font-size:1.2em;
  29.     padding:0.3em 1.2em;
  30.     border-radius:10px;
  31.     border:1px solid #d9d9d9;
  32.     background: -webkit-linear-gradient(#ffffff,#dfdfdf);
  33.     background: -o-linear-gradient(#ffffff,#dfdfdf);
  34.     background: -moz-linear-gradient(#ffffff,#dfdfdf);
  35.     background: linear-gradient(#ffffff,#dfdfdf);
  36.     box-shadow:0px 1px 3px rgba(0,0,0,0.7);
  37.     outline: none;
  38. }
  39. #submit{
  40.     margin-right:1.6em;
  41. }
  42. #submit:hover,#clear:hover{
  43.     background: -webkit-linear-gradient(#66ccff,#74b1d1);
  44.     background: -o-linear-gradient(#66ccff,#74b1d1);
  45.     background: -moz-linear-gradient(#66ccff,#74b1d1);
  46.     background: linear-gradient(#66ccff,#74b1d1);
  47.     cursor: pointer;
  48. }
  49. .upload_message_show{
  50.     margin-top: 20px;
  51.     display: none;
  52. }
  53. .upload_file_message{
  54.     padding: 1.4em 0em;
  55.     padding-left: 60%;
  56.     padding-right: 1.2em;
  57.     border-radius: 10px;
  58.     background: -webkit-linear-gradient(#dfdfdf,#cccccc);
  59.     background: -o-linear-gradient(#dfdfdf,#cccccc);
  60.     background: -moz-linear-gradient(#dfdfdf,#cccccc);
  61.     background: linear-gradient(#dfdfdf,#cccccc);
  62.     font-size: 1.1em;
  63.     font-weight: bolder;
  64.     position: relative;
  65.     min-height: 6.5em;
  66. }
  67. .upload_file_error{
  68.     color:red;
  69. }
  70. .message_box{
  71.     position: absolute;
  72.     left: 1.2em;
  73.     top: 1.4em;
  74. }
  75. .upload_file_preview{
  76.     height: 100%;
  77.     position: relative;
  78. }
  79. .upload_bar_box{
  80.     width: 100%;
  81.     height: 1em;
  82.     border-radius:0.5em;
  83.     position: relative;
  84.     box-shadow:0px 0px 3px rgba(0,0,0,0.6);
  85.     line-height: 1em;
  86. }
  87. .upload_bar{
  88.     width:0%;
  89.     border-radius:0.5em;
  90.     background:-webkit-linear-gradient(#F01731,#F50B43);
  91.     background:-o-linear-gradient(#F01731,#F50B43);
  92.     background:-moz-linear-gradient(#F01731,#F50B43);
  93.     background:linear-gradient(#F01731,#F50B43);
  94.     height:100%;
  95. }
  96. .upload_percent{
  97.     position: absolute;
  98.     right: 10px;
  99.     top:0em;
  100.     font-weight:700;
  101. }
  102. .upload_count{
  103.     width: 100%;
  104.     font-size:0.8em;
  105.     margin-top:1em;
  106.     position: relative;
  107. }
  108. .left_time{
  109.     margin-left: 1em;
  110. }
  111. .speed{
  112.     position: absolute;
  113.     right:1em;
  114.     top: 0em;
  115. }

js:

变量定义：

</>复制代码 
  1. var nSlice_count = 100,//分段数，文件分段数
  2.     nFactCount,           //实际分段数
  3.     nMin_size      = 0.5,//最小分段大小(M)
  4.     nMax_size     = 5,  //最大分段大小(M)
  5.     nFactSize,           //实际分段大小
  6.     nCountNum     = 0,  //分段标号
  7.     sFile_type,           //文件类型
  8.     nFile_load_size,   //文件上传部分大小
  9.     nFile_size,           //文件大小
  10.     nPreuploaded = 0,  //上一次记录上传部分的大小
  11.     bIs_uploading= false,//是否上传中
  12.     bStart_upload= false,//是否开始上传
  13.     bEnd_upload  = false;//是否上传完成

当文件域变化或者点击清空时，重置所有已记录信息：

</>复制代码 
  1. function messageChange(){
  2.     document.querySelector(".upload_file_name").innerHTML ="文件名称: " ;
  3.     document.querySelector(".upload_file_type").innerHTML ="文件类型: " ;
  4.     document.querySelector(".upload_file_size").innerHTML ="文件大小: " ;
  5.     document.querySelector(".isCompleted").innerHTML       ="上传状态: " ;
  6.     document.querySelector(".upload_bar").style.width = "0%";
  7.     document.querySelector(".upload_percent").innerHTML = "0%";
  8.     document.querySelector(".upload_file_preview").innerHTML ="";
  9.     document.querySelector(".upload_message_show").style.display = "none";
  10. }
  11. function clearUploadFile(e){
  12.     var e = e || event;
  13.     e.stopPropagation();
  14.     e.preventDefault();
  15.     document.getElementById("file").value = "";
  16.     bStart_upload = false;
  17.     messageChange();
  18. }
  19. function fileReady(){
  20.     bIs_uploading = false;
  21.     bEnd_upload = false;
  22.     nCountNum = 0;
  23.     bStart_upload = false;
  24.     messageChange();
  25. }

发生错误时的处理：

</>复制代码 
  1. function errorUp(){
  2.     bStart_upload = false;
  3.     document.querySelector(".upload_file_error").innerHTML = "上传过程中出错";
  4. }
  5. function abortUp(){
  6.     bStart_upload = false;
  7.     document.querySelector(".upload_file_error").innerHTML = "网络故障，请检查重试";
  8. }

文件上传后提供预览，考虑到手机小屏幕的问题，只在ipad和pc上提供预览，预览的文件类型为
image/video/audio，由于浏览器对多媒体格式的支持不同，不能保证每个文件都能正常播放

</>复制代码 
  1. function filePreview($src){
  2.     var ftype = sFile_type;
  3.     var $temp;
  4.     var IMGMaxHeight = document.querySelector(".upload_message_show").offsetHeight;
  5.     switch(ftype){
  6.         case "image" :
  7.         $temp = "";
  8.         break;
  9.         case "audio" :
  10.         $temp = "";
  11.         break;
  12.         case "video" :
  13.         $temp = "";
  14.         break;
  15.     }
  16.     var IsPreview = checkUserAgent();
  17.     if(IsPreview)
  18.     document.querySelector(".upload_file_preview").innerHTML = $temp;
  19. }
  20. function checkUserAgent(){
  21.     var msg = true;
  22.     var agent = ["ipod","iphone","android","symbian","windows mobile"];
  23.     var info =navigator.userAgent.toLowerCase();
  24.     
  25.     for(var i=0,j=agent.length;i0)
  26.         msg = false;
  27.     }
  28.     return msg;
  29. }

数据单位转化：

</>复制代码 
  1. var conversion = (function(){
  2.         var unitConversion = {
  3.             bytesTosize:function(data){
  4.                 var unit = ["Bytes","KB","MB","GB"];
  5.                 var i = parseInt(Math.log(data)/Math.log(1024));
  6.                 return (data/Math.pow(1024,i)).toFixed(1) + " " + unit[i];
  7.             },
  8.             secondsTotime:function(sec){
  9.                 var h = Math.floor(sec/3600),
  10.                     m = Math.floor((sec-h*3600)/60),
  11.                     s = Math.floor(sec-h*3600-m*60);
  12.                 if(h<10) h = "0" + h;
  13.                 if(m<10) m = "0" + m;
  14.                 if(s<10) s = "0" + s;
  15.                 return h + ":" + m + ":" + s + ":";
  16.             }
  17.         };
  18.         return unitConversion;
  19.     })();

文件上传和上传时的计算：

</>复制代码 
  1. //start sending
  2.     var reader = new FileReader();
  3.     var timer;
  4.     var fProgress = function(e){
  5.         var fSize = get_file_message.getAll().fileSize;
  6.         timer = setTimeout(uploadCount(e,fSize,conversion),300);
  7.     };
  8.     var floadend = function(e){
  9.         if(reader.error){alert("上传失败,出现未知错误");clearTimeout(timer);return;}
  10.         clearTimeout(timer);
  11.         if(nCountNum+1!=nFactCount)
  12.         {
  13.             if(bStart_upload)
  14.             {
  15.                 nCountNum++;
  16.                 uploadStart();
  17.                 return;
  18.             } else {
  19.                 document.querySelector(".speed").innerHTML = "0k/s";
  20.                 document.querySelector(".left_time").innerHTML = "剩余时间 | 00:00:00";
  21.                 return;
  22.             }        
  23.         }
  24.         bEnd_upload = true;
  25.         document.querySelector(".layer_box").style.display = "none";
  26.         document.querySelector(".speed").innerHTML = "0k/s";
  27.         document.querySelector(".left_time").innerHTML = "剩余时间 | 00:00:00";
  28.         document.querySelector(".upload_percent").innerHTML = "100.00%";
  29.         document.getElementById("submit").value = "上传";
  30.         
  31.         var $res = JSON.parse(e.target.responseText);
  32.         filePreview($res);
  33.         if($res.res=="success") bIs_uploading =true;
  34.         document.querySelector(".isCompleted").innerHTML="上传状态: " + (bIs_uploading?"上传完成":"正在上传..");
  35.     };
  36.     var uploadStart = function(){
  37.         var get_all = get_file_message.getAll();
  38.         var start = nCountNum * nFactSize,
  39.             end   = Math.min(start+nFactSize,get_all.fileSize);
  40.         var fData = new FormData();
  41.         fData.append("file",file.slice(start,end));
  42.         fData.append("name",file.name);
  43.         fData.append("size",file.size);
  44.         fData.append("type",file.type);
  45.         fData.append("totalCount",nFactCount);
  46.         fData.append("indexCount",nCountNum);
  47.         fData.append("trueName",file.name.substring(0,file.name.lastIndexOf(".")));
  48.         
  49.         document.querySelector(".layer_box").style.display = "block";
  50.         if(!sFile_type)
  51.         sFile_type = file.type.substring(0,file.type.indexOf("/"));
  52.         var xhr = new XMLHttpRequest();
  53.         xhr.upload.addEventListener("progress",fProgress,false);
  54.         xhr.addEventListener("load",floadend,false);
  55.         xhr.addEventListener("error",errorUp,false);
  56.         xhr.addEventListener("abort",abortUp,false);
  57.         
  58.         xhr.open("POST","php/send/");
  59.         xhr.send(fData);
  60.     };
  61.     reader.onloadstart = function(){
  62.         var get_all = get_file_message.getAll(),
  63.             fName = get_all.fileName,
  64.             fType = get_all.fileType,
  65.             fSize = conversion.bytesTosize(get_all.fileSize);
  66.         document.querySelector(".upload_message_show").style.display = "block";
  67.         document.querySelector(".upload_file_name").innerHTML ="文件名称: " + fName;
  68.         document.querySelector(".upload_file_type").innerHTML ="文件类型: " + fType;
  69.         document.querySelector(".upload_file_size").innerHTML ="文件大小: " + fSize;
  70.         document.querySelector(".isCompleted").innerHTML       ="上传状态: " + (bIs_uploading?"完成":"正在上传中..");
  71.         nFactSize = get_all.fileSize/nSlice_count;
  72.         nFactSize = (nFactSize>=nMin_size*1024*1024?nFactSize:nMin_size*1024*1024);
  73.         nFactSize = (nFactSize<=nMax_size*1024*1024?nFactSize:nMax_size*1024*1024);
  74.         nFactCount= Math.ceil(get_all.fileSize/nFactSize);
  75.         uploadStart();
  76.     };
  77.     reader.readAsBinaryString(file);
  78. }
  79. function uploadCount(e,fSize,conversion){
  80.     var upSize = e.loaded+nCountNum*nFactSize,
  81.         perc = (upSize*100/fSize).toFixed(2) + "%";
  82.     var speed = Math.abs(upSize - nPreuploaded);
  83.     if(speed==0){clearTimeout("timer");return;}
  84.     var leftTime = conversion.secondsTotime(Math.round((fSize-upSize)/speed));
  85.     speed = conversion.bytesTosize(speed)+"/s";
  86.     document.querySelector(".speed").innerHTML = speed;
  87.     document.querySelector(".left_time").innerHTML = "剩余时间 | " + leftTime;
  88.     document.querySelector(".upload_percent").innerHTML = perc;
  89.     document.querySelector(".upload_bar").style.width = perc;
  90.     nPreuploaded = upSize;
  91. }

PHP：

</>复制代码 
  1. "success","url"=>mb_convert_encoding($truename."-".$fsize."/".$fname,"utf-8","gbk"));
  2.     echo json_encode($res);
  3. }
  4. ?>

还有一些细节的js这里没给出来，主要就上面的功能，有问题的话欢迎回复，楼主只是个新手，不足之处请大家多多见谅。

云服务器 GPU云服务器 断点续传 文件服务器 断点续传 断点视频上传文件上传 大文件断点上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85819.html

相关文章

  • 分片上传与断点续传解决方案

    摘要：所以，该文适合于全栈工程师，至少是想成为还有，为什么需要分片，不分片能实现断点续传吗分片是为了充分利用网络带宽，加快上传速度不分片也是能够实现断点续传的。详细参考文件上传组件深度剖析分片上传与断点续传之间没有很直接的关系好了，进入正题。 上传文件，基本上是每一个网站应用都会具备的一个功能。对于一个网络存储应用，对于上传功能要求更是迫切。 如今市面上成熟上传插件，如WebUpload...

    includecmath 评论0 收藏0

  • html5文件上传断点续传

    摘要：最近公司要做一个上传的插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛，没做过啊。没办法，，只能去查资料了。作为一名还未毕业的大学僧，本人表示亚历山大。不过还好是做出来了，不敢说代码写得很好，大家将就着看吧。 最近公司要做一个html5上传的jquery插件，要在下先实现功能，要求显示上传进度，文件信息，断点续传等等。我一看，艾玛！Σ(ﾟдﾟlll)，没做...

    sixleaves 评论0 收藏0

  • Android Okhttp 断点续传面试解析

    摘要：怎么支持断点续传的协议中默认支持获取文件的部分内容，这其中主要是通过头部的两个参数和来实现的。我们在刷一下面试题的时候，有时候会看到一些大厂会问关于断点续传的原理，那么今天在这里从 HTTP 断点续传知识和 Android 中如何实现断点续传的思路来做一个关于 Android 断点续传原理的总结。 Http 断点续传知识点 什么是断点续传 指的是在上传/下载时，将任务（一个文件或压缩包）人为...

    ACb0y 评论0 收藏0

发表评论

登陆后可评论

0条评论

tianlai

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<