ajax视频拖拽上传（完善版）

最新推荐文章于 2023-05-24 11:25:41 发布

丶酸菜

最新推荐文章于 2023-05-24 11:25:41 发布

阅读量795

点赞数 1

分类专栏： php 文章标签： Ajax

本文链接：https://blog.youkuaiyun.com/qq920811275/article/details/53339415

版权

php 专栏收录该内容

7 篇文章

订阅专栏

在前辈的基础上，进行了一些完善

功能：可实现拖拽上传视频，有进度条显示，MP4格式的视频还可实现在线播放，

进行了视频上传格式限制，格式不符合有提示不能上传，大小可按情况自行添加限制

最重要的是实现了大文件断点续传的功能，更详细功能可下载后体验，就不一一赘述了

首先，创建一个index.html页面

注释代码中很详细，html代码如下：

[html]view plaincopy 
   
 <!DOCTYPE html>    
 <html>    
     <head>    
         <meta charset="UTF-8"/>    
         <title>ajax视频拖拽上传</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 οnclick="xhr2()">ajax上传</button>-->       
         <input type="button" onclick="stopup()" id="stop" value="上传">       
         <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('可以上传');    
                 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', 'upload.php'); //第二步骤    
                 //发送请求    
                 xhr.send(formData);  //第三步骤    
                 stopbutton.innerHTML = "暂停"    
                 //ajax返回    
                 xhr.onreadystatechange = function(){ //第四步    
             　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {    
             　　　　　　console.log( xhr.responseText );    
                         if(xhr.responseText=="none"){    
                             alert("视频格式不支持");  
                             persent.innerHTML="0%";  
                             document.getElementById("drop_area").innerHTML="支持视频格式为'.flv' ,'.rmvb' , '.mp4'";  
                             pro.value=0;  
                             return false;  
                         }else if(i<filecount){  
                             xhr2();  
                         }else{    
                             alert('视频上传完成');  
                             //location.href="文件";   
                         }           
             　　　　}    
             　　};    
                 //设置超时时间    
                 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>    

再创建一个接收，并保存到服务器的文件upload.php

文件代码

[html]view plaincopy 
   
 <?php    
 //$name=$_POST['username'];  
 $dir1=iconv('UTF-8','gb2312//IGNORE',$_POST['filename']);  
   
 //设置文件大小不超过100MB  
 //$max_size=1446861248382;  
 //允许上传的文件扩展名  
 $file_type = array( '.flv' , '.wmv' , '.rmvb' , '.mp4' );  
   
 $filetype='.'.substr(strrchr($dir1, "."),1);  
   
 if(!in_array($filetype,$file_type))  
 {  
     echo "none";  
     return false;  
     die;  
 }  
 $dir="uploads/".md5($dir1);    
 file_exists($dir) or mkdir($dir,0777,true);    
     
 $path=$dir."/".$_POST['blobname'];  
    
 move_uploaded_file($_FILES["file"]["tmp_name"],iconv('UTF-8','gb2312//IGNORE',$path));    
     
 if(isset($_POST['lastone'])){    
     echo $_POST['lastone'];    
     $count=$_POST['lastone'];    
         
     $fp = fopen($dir1,"abw");    
     for($i=0;$i<=$count;$i++){    
         $handle = fopen($dir."/".$i,"rb");      
         fwrite($fp,fread($handle,filesize($dir."/".$i)));      
         fclose($handle);        
     }  
     fclose($fp);  
     if(file_exists($dir1))  
     {  
         echo '上传完成';  
                  
     }     
 }  
         
 ?>