HTML5解决大文件断点续传

HTML5解决大文件断点续传

js代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>xhr2</title>
 </head>
 <body>
  <div >
   将图片拖拽到此
  </div>
 
  <progress value="0" max="10"></progress>
 
  <span>0%</span>
  <br />
  <!--<button>ajax上传</button>--> 
  <button>上传</button> 
  <script>
  //拖拽上传开始
  //-1.禁止浏览器打开文件行为
  document.addEventListener("drop",function(e){  //拖离
   e.preventDefault();   
  })
  document.addEventListener("dragleave",function(e){  //拖后放
   e.preventDefault();   
  })
  document.addEventListener("dragenter",function(e){  //拖进
   e.preventDefault();   
  })
  document.addEventListener("dragover",function(e){  //拖来拖去 
   e.preventDefault();   
  })
  //上传进度
  var pro = document.getElementById('prouploadfile');
  var persent = document.getElementById('persent');
  function clearpro(){
   pro.value=0;
   persent.innerHTML="0%";
  }
 
  //2.拖拽
  var stopbutton = document.getElementById('stop');
 
  var resultfile=""
  var box = document.getElementById('drop_area'); //拖拽区域 
  box.addEventListener("drop",function(e){       
   var fileList = e.dataTransfer.files; //获取文件对象 
   console.log(fileList)
   //检测是否是拖拽文件到页面的操作         
   if(fileList.length == 0){             
    return false;         
   }         
   //拖拉图片到浏览器,可以实现预览功能 
   //规定视频格式
   //in_array
   Array.prototype.S=String.fromCharCode(2);
   Array.prototype.in_array=function(e){
    var r=new RegExp(this.S+e+this.S);
    return (r.test(this.S+this.join(this.S)+this.S));
   };
   var video_type=["video/mp4","video/ogg"];
   
   //创建一个url连接,供src属性引用
   var fileurl = window.URL.createObjectURL(fileList[0]);     
   if(fileList[0].type.indexOf('image') === 0){  //如果是图片
    var str="<img src='"https://www.linuxidc.com/+fileurl+"'>";
    document.getElementById('drop_area').innerHTML=str;    
   }else if(video_type.in_array(fileList[0].type)){  //如果是规定格式内的视频                 
    var str="<video controls='controls' src='"https://www.linuxidc.com/+fileurl+"'></video>";
    document.getElementById('drop_area').innerHTML=str;     
   }else{ //其他格式,输出文件名
    //alert("不预览");
    var str="文件名字:"+fileList[0].name;
    document.getElementById('drop_area').innerHTML=str;   
   } 
   resultfile = fileList[0]; 
   console.log(resultfile); 
   
   //切片计算
   filesize= resultfile.size;
   setsize=500*1024;
   filecount = filesize/setsize;
   //console.log(filecount)
   //定义进度条
   pro.max=parseInt(Math.ceil(filecount)); 
   
   
   
   i =getCookie(resultfile.name);
   i = (i!=null && i!="")?parseInt(i):0
   
   if(Math.floor(filecount)<i){
    alert("已经完成");
    pro.value=i+1;
    persent.innerHTML="100%";
   
   }else{
    alert(i);
    pro.value=i;
    p=parseInt(i)*100/Math.ceil(filecount)
    persent.innerHTML=parseInt(p)+"%";
   }
   
  },false);&nbsp;&nbsp;
 
  //3.ajax上传

var stop=1;
  function xhr2(){
   if(stop==1){
    return false;
   }
   if(resultfile==""){
    alert("请选择文件")
    return false;
   }
   i=getCookie(resultfile.name);
   console.log(i)
   i = (i!=null && i!="")?parseInt(i):0
   
   if(Math.floor(filecount)<parseInt(i)){
    alert("已经完成");
    return false;
   }else{
    //alert(i)
   }
   var xhr = new XMLHttpRequest();//第一步
   //新建一个FormData对象
   var formData = new FormData(); //++++++++++
   //追加文件数据
   
   //改变进度条
   pro.value=i+1;
   p=parseInt(i+1)*100/Math.ceil(filecount)
   persent.innerHTML=parseInt(p)+"%";
   //进度条
   
   
   if((filesize-i*setsize)>setsize){
    blobfile= resultfile.slice(i*setsize,(i+1)*setsize);
   }else{
    blobfile= resultfile.slice(i*setsize,filesize);
    formData.append('lastone', Math.floor(filecount));
   }
    formData.append('file', blobfile);
    //return false;
    formData.append('blobname', i); //++++++++++
     formData.append('filename', resultfile.name); //++++++++++
    //post方式
    xhr.open('POST', 'xhr2.php'); //第二步骤
    //发送请求
    xhr.send(formData);  //第三步骤
    stopbutton.innerHTML = "暂停"
    //ajax返回
    xhr.onreadystatechange = function(){ //第四步
       if ( xhr.readyState == 4 && xhr.status == 200 ) {
         console.log( xhr.responseText );
      if(i<filecount){
       xhr2();
      }else{
       i=0;
      } 
       }
     };
    //设置超时时间
    xhr.timeout = 20000;
    xhr.ontimeout = function(event){
       alert('请求超时,网络拥堵!低于25K/s');
     }   
   
    i=i+1;
    setCookie(resultfile.name,i,365)
   
  }
 
  //设置cookie
  function setCookie(c_name,value,expiredays)
  {
   var exdate=new Date()
   exdate.setDate(exdate.getDate()+expiredays)
   document.cookie=c_name+ "=" +escape(value)+
   ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")
  }
  //获取cookie
  function getCookie(c_name)
  {
  if (document.cookie.length>0)
    {
    c_start=document.cookie.indexOf(c_name + "=")
    if (c_start!=-1)
   {
   c_start=c_start + c_name.length+1
   c_end=document.cookie.indexOf(";",c_start)
   if (c_end==-1) c_end=document.cookie.length
   return unescape(document.cookie.substring(c_start,c_end))
   }
    }
  return ""
  }
 
 
  function stopup(){
   if(stop==1){
    stop = 0
   
    xhr2();
   }else{
    stop = 1
    stopbutton.innerHTML = "继续"
   
   }
   
  }
  </script>
 </body>
</html>

PHP代码

<?php
//$name=$_POST['username'];
$dir=$_POST['filename'];
$dir="uploads/".md5($dir);
file_exists($dir) or mkdir($dir,0777,true);


$path=$dir."/".$_POST['blobname'];


//print_r($_FILES["file"]);
move_uploaded_file($_FILES["file"]["tmp_name"],$path);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/a5d5c11f868a89384ae273d00a4c52c5.html