html5解决大文件断点续传(js)

该博客介绍了一种使用HTML5实现大文件断点续传的方法,通过拖拽文件到页面,利用XMLHttpRequest Level 2和FormData对象进行分片上传,同时结合JavaScript进行进度条显示和文件切片计算。当文件上传中断时,可以继续从上次中断的位置开始上传,提高了用户体验。
摘要由CSDN通过智能技术生成
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8"/>  
  5.         <title>xhr2</title>  
  6.     </head>  
  7.     <body>  
  8.         <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">  
  9.             将图片拖拽到此  
  10.         </div>  
  11.           
  12.         <progress value="0" max="10" id="prouploadfile"></progress>  
  13.           
  14.         <span id="persent">0%</span>  
  15.         <br />  
  16.         <!--<button οnclick="xhr2()">ajax上传</button>-->     
  17.         <button onclick="stopup()" id="stop">上传</button>      
  18.         <script>  
  19.         //拖拽上传开始  
  20.         //-1.禁止浏览器打开文件行为  
  21.         document.addEventListener("drop",function(e){  //拖离   
  22.             e.preventDefault();      
  23.         })  
  24.         document.addEventListener("dragleave",function(e){  //拖后放   
  25.             e.preventDefault();      
  26.         })  
  27.         document.addEventListener("dragenter",function(e){  //拖进  
  28.             e.preventDefault();      
  29.         })  
  30.         document.addEventListener("dragover",function(e){  //拖来拖去    
  31.             e.preventDefault();      
  32.         })  
  33.         //上传进度  
  34.         var pro = document.getElementById('prouploadfile');  
  35.         var persent = document.getElementById('persent');  
  36.         function clearpro(){  
  37.             pro.value=0;  
  38.             persent.innerHTML="0%";  
  39.         }  
  40.           
  41.         //2.拖拽  
  42.         var stopbutton = document.getElementById('stop');  
  43.           
  44.         var resultfile=""</
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值