PHP加JS實現分片上傳，斷點續傳
阿新 • • 發佈：2018-08-09
index ech start prevent control stat 選擇 pen append
<!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 //$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); } ?>
PHP加JS實現分片上傳，斷點續傳