前端代码：
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>xhr2</title> 6 </head> 7 <body> 8 <div id="drop_area" style="border:3px dashed silver;width:200px; height:200px"> 9 将图片拖拽到此 10 </div> 11 12 <progress value="0" max="10" id="prouploadfile"></progress> 13 14 <span id="persent">0%</span> 15 <br /> 16 <!--<button onclick="xhr2()">ajax上传</button>--> 17 <button onclick="stopup()" id="stop">上传</button> 18 <script> 19 //拖拽上传开始 20 //-1.禁止浏览器打开文件行为 21 document.addEventListener("drop",function(e){ //拖离 22 e.preventDefault(); 23 }) 24 document.addEventListener("dragleave",function(e){ //拖后放 25 e.preventDefault(); 26 }) 27 document.addEventListener("dragenter",function(e){ //拖进 28 e.preventDefault(); 29 }) 30 document.addEventListener("dragover",function(e){ //拖来拖去 31 e.preventDefault(); 32 }) 33 //上传进度 34 var pro = document.getElementById('prouploadfile'); 35 var persent = document.getElementById('persent'); 36 function clearpro(){ 37 pro.value=0; 38 persent.innerHTML="0%"; 39 } 40 41 //2.拖拽 42 var stopbutton = document.getElementById('stop'); 43 44 var resultfile="" 45 var box = document.getElementById('drop_area'); //拖拽区域 46 box.addEventListener("drop",function(e){ 47 var fileList = e.dataTransfer.files; //获取文件对象 48 console.log(fileList) 49 //检测是否是拖拽文件到页面的操作 50 if(fileList.length == 0){ 51 return false; 52 } 53 //拖拉图片到浏览器，可以实现预览功能 54 //规定视频格式 55 //in_array 56 Array.prototype.S=String.fromCharCode(2); 57 Array.prototype.in_array=function(e){ 58 var r=new RegExp(this.S+e+this.S); 59 return (r.test(this.S+this.join(this.S)+this.S)); 60 }; 61 var video_type=["video/mp4","video/ogg"]; 62 63 //创建一个url连接,供src属性引用 64 var fileurl = window.URL.createObjectURL(fileList[0]); 65 if(fileList[0].type.indexOf('image') === 0){ //如果是图片 66 var str="<img width='200px' height='200px' src='"+fileurl+"'>"; 67 document.getElementById('drop_area').innerHTML=str; 68 }else if(video_type.in_array(fileList[0].type)){ //如果是规定格式内的视频 69 var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>"; 70 document.getElementById('drop_area').innerHTML=str; 71 }else{ //其他格式，输出文件名 72 //alert("不预览"); 73 var str="文件名字:"+fileList[0].name; 74 document.getElementById('drop_area').innerHTML=str; 75 } 76 resultfile = fileList[0]; 77 console.log(resultfile); 78 79 //切片计算 80 filesize= resultfile.size; 81 setsize=500*1024; 82 filecount = filesize/setsize; 83 //console.log(filecount) 84 //定义进度条 85 pro.max=parseInt(Math.ceil(filecount)); 86 87 88 89 i =getCookie(resultfile.name); 90 i = (i!=null && i!="")?parseInt(i):0 91 92 if(Math.floor(filecount)<i){ 93 alert("已经完成"); 94 pro.value=i+1; 95 persent.innerHTML="100%"; 96 97 }else{ 98 alert(i); 99 pro.value=i; 100 p=parseInt(i)*100/Math.ceil(filecount) 101 persent.innerHTML=parseInt(p)+"%"; 102 } 103 104 },false); 105 106 //3.ajax上传 107 108 var stop=1; 109 function xhr2(){ 110 if(stop==1){ 111 return false; 112 } 113 if(resultfile==""){ 114 alert("请选择文件") 115 return false; 116 } 117 i=getCookie(resultfile.name); 118 console.log(i) 119 i = (i!=null && i!="")?parseInt(i):0 120 121 if(Math.floor(filecount)<parseInt(i)){ 122 alert("已经完成"); 123 return false; 124 }else{ 125 //alert(i) 126 } 127 var xhr = new XMLHttpRequest();//第一步 128 //新建一个FormData对象 129 var formData = new FormData(); //++++++++++ 130 //追加文件数据 131 132 //改变进度条 133 pro.value=i+1; 134 p=parseInt(i+1)*100/Math.ceil(filecount) 135 persent.innerHTML=parseInt(p)+"%"; 136 //进度条 137 138 139 if((filesize-i*setsize)>setsize){ 140 blobfile= resultfile.slice(i*setsize,(i+1)*setsize); 141 }else{ 142 blobfile= resultfile.slice(i*setsize,filesize); 143 formData.append('lastone', Math.floor(filecount)); 144 } 145 formData.append('file', blobfile); 146 //return false; 147 formData.append('blobname', i); //++++++++++ 148 formData.append('filename', resultfile.name); //++++++++++ 149 //post方式 150 xhr.open('POST', 'xhr2.php'); //第二步骤 151 //发送请求 152 xhr.send(formData); //第三步骤 153 stopbutton.innerHTML = "暂停" 154 //ajax返回 155 xhr.onreadystatechange = function(){ //第四步 156 if ( xhr.readyState == 4 && xhr.status == 200 ) { 157 console.log( xhr.responseText ); 158 if(i<filecount){ 159 xhr2(); 160 }else{ 161 i=0; 162 } 163 } 164 }; 165 //设置超时时间 166 xhr.timeout = 20000; 167 xhr.ontimeout = function(event){ 168 alert('请求超时，网络拥堵！低于25K/s'); 169 } 170 171 i=i+1; 172 setCookie(resultfile.name,i,365) 173 174 } 175 176 //设置cookie 177 function setCookie(c_name,value,expiredays) 178 { 179 var exdate=new Date() 180 exdate.setDate(exdate.getDate()+expiredays) 181 document.cookie=c_name+ "=" +escape(value)+ 182 ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/") 183 } 184 //获取cookie 185 function getCookie(c_name) 186 { 187 if (document.cookie.length>0) 188 { 189 c_start=document.cookie.indexOf(c_name + "=") 190 if (c_start!=-1) 191 { 192 c_start=c_start + c_name.length+1 193 c_end=document.cookie.indexOf(";",c_start) 194 if (c_end==-1) c_end=document.cookie.length 195 return unescape(document.cookie.substring(c_start,c_end)) 196 } 197 } 198 return "" 199 } 200 201 202 function stopup(){ 203 if(stop==1){ 204 stop = 0 205 206 xhr2(); 207 }else{ 208 stop = 1 209 stopbutton.innerHTML = "继续" 210 211 } 212 213 } 214 </script> 215 </body> 216</html>
PHP代码：
1<?php 2//$name=$_POST['username']; 3$dir=$_POST['filename']; 4$dir="uploads/".md5($dir); 5file_exists($dir) or mkdir($dir,0777,true); 6 7$path=$dir."/".$_POST['blobname']; 8 9//print_r($_FILES["file"]); 10move_uploaded_file($_FILES["file"]["tmp_name"],$path); 11 12if(isset($_POST['lastone'])){ 13 echo $_POST['lastone']; 14 $count=$_POST['lastone']; 15 16 $fp = fopen($_POST['filename'],"abw"); 17 for($i=0;$i<=$count;$i++){ 18 $handle = fopen($dir."/".$i,"rb"); 19 fwrite($fp,fread($handle,filesize($dir."/".$i))); 20 fclose($handle); 21 } 22 fclose($fp); 23} 24?>