ajax视频如何上传?

2020-04-12 20:05:05 java常见问答 5542

使用ajax如何上传视频呢?是否了解过呢?这个功能其实在各个网站中非常的常见,通用的技术是否了解呢?希望今天小编能给你们带来帮助哦,接下来就让我们一起来了解下吧。

功能:可实现拖拽上传视频,有进度条显示,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" 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

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

以上,就是今天小编给大家所带来的有关Java入门的知识,是否有个深刻的了解,小编的解说有没有帮到你们呢?想要了解更多知识,请继续关注本网站。