News Contents
信息中心

ajax視頻拖拽上傳(完善版)

發表日期:2020/2/15      瀏覽次數:

在前輩的基礎上,進行了一些完善


功能:可實現拖拽上傳視頻,有進度條顯示,MP4格式的視頻還可實現在線播放,


進行了視頻上傳格式限制,格式不符合有提示不能上傳,大小可按情況自行添加限制


最重要的是實現了大文件斷點續傳的功能,更詳細功能可下載后體驗,就不一 一贅述了



首先,創建一個index.html頁面

注釋代碼中很詳細,html代碼如下:

<!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" οnclick="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

文件代碼

<?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 '上傳完成';

                   

        }   

    }

          

    ?>  




盛大建站承接個人、公司、企業的網站建設、網頁設計、網店制作、獨立商城制作、外貿網站制作,也承接同行介紹的業務,歡迎聯系!
本站承接主要業務如下:
1、提供免備案虛擬主機(網站空間),有獨立國內服務器、高速美國服務器、香港服務器、韓國服務器、日本服務器,>> http://www.fuanxx.com
2、網站建設:個人網店制作、企業建站、公司網站、新聞、下載等;論壇、博客網站搭建,承接外貿英文站制作
3、承接阿里巴巴、京東、淘寶、天貓等的商品數據采集
4、網站防釣魚,可以過360、QQ、搜狗、金山、微信攔截
5、要就發IP網站限制訪問系統,防止同行抄襲并保障海外客戶訪問不受影響,>> http://www.198ip.com
  下一篇:沒有了!
十年如一日,我們專注于提供高品質 定制網站建設服務!
您的信任,我們的責任,期待與您的合作!
广西11选5技巧