HTML5解决大文件断点续传
js代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title>xhr2</title></head><body> <p id="drop_area" style="border:3px dashed silver;width:200px; height:200px"> 将图片拖拽到此 </p> <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);}?>
以上就上有关HTML5解决大文件断点续传的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。