js代码
[html]view plaincopy
nbsp;html>  html>      head>          meta charset=utf-8/>          title>xhr2title>      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=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=+fileurl+'>;                  document.getelementbyid('drop_area').innerhtml=str;                               }else if(video_type.in_array(filelist[0].type)){   //如果是规定格式内的视频                                    var str=+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(ifilecount){                              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]view plaincopy
以上就介绍了 html5解决大文件断点续传，包括了方面的内容，希望对php教程有兴趣的朋友有所帮助。