html5断点续传

来源：互联网发布：ps名片源码编辑：程序博客网时间：2024/05/19 22:54

    <!DOCTYPE html>      <html>          <head>              <meta charset="UTF-8"/>              <title>xhr2</title>          </head>          <body>              <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">                  将图片拖拽到此              </div>                            <progress value="0" max="10" id="prouploadfile"></progress>                            <span id="persent">0%</span>              <br />              <!--<button onclick="xhr2()">ajax上传</button>-->                 <button onclick="stopup()" id="stop">上传</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 width='200px' height='200px' src='"+fileurl+"'>";                      document.getElementById('drop_area').innerHTML=str;                                   }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                                        var str="<video width='200px' height='200px' controls='controls' src='"+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);                              //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);            if(isset($_POST['lastone'])){          echo $_POST['lastone'];          $count=$_POST['lastone'];                    $fp   = fopen($_POST['filename'],"abw");          for($i=0;$i<=$count;$i++){              $handle = fopen($dir."/".$i,"rb");                fwrite($fp,fread($handle,filesize($dir."/".$i)));                fclose($handle);              }          fclose($fp);      }                          ?>

0 0