51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
ECSHOP商城
当前位置:首页>实用代码>ECSHOP商城>

ecshop二次开发之视频上传

时间:2017-08-10 11:44点击:

1.前台展示效果:

2.后台展示效果:


3.代码实现:

后台实现过程:

1.在languages/zh_cn/admin/goods.PHP中插入


    $_LANG['tab_video'] = '视频上传';  
2显示标签在admin/templates/goods_info.htm中

将<span class="tab-back" id="video-table">{$lang.tab_video}</span>

写入到<div id="tabbar-div">里


然后,在form标签中将下面代码粘贴在下图之上



    <table width="90%" id="video-table" align="center" style="display:none;">  
            <tr>  
            <td>   
                <div  id="drop_area" style="border:3px solid red;width:200px; height:150px">    
                    将将你所需上传视频拖拽到此即可    
                </div>    
                  <input type="hidden" id="video_val" name="goods_video">  
                <progress value="0" max="10" id="prouploadfile"></progress>    
                    
                <span id="persent">0%</span>    
                <br />    
                <!--<button onclick="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;              
                    }  
     //判断文件大小  
                    var num=1048576;  
                    var cha=Math.ceil(fileList[0].size)/num;  
                    if(cha>200)  
                    {  
                        alert(Math.ceil(fileList[0].size/num));  
                        var str="<font color='red'>请选取文件在200M以下的视频</font>";  
                        document.getElementById('drop_area').innerHTML=str;  
                        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);   
                        formData.append('goods_id', "{$goods.goods_id}");   
                        //return false;    
                        formData.append('blobname', i); //++++++++++    
                    formData.append('filename', resultfile.name); //++++++++++    
                        //post方式    
                        xhr.open('POST', 'goods.php?act=upload'); //第二步骤    
                        //发送请求    
                        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(xhr.responseText);  
                                    clearCookie(resultfile.name);  
                                    document.getElementById("video_val").value=xhr.responseText;    
                                    //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 clearCookie(name) {    
                    setCookie(name, "", -1);    
                }  
                //获取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>  
                </td>  
                </tr>  
                </table>  
然后,在admin/goods.PHP中创建一个上传视频的方法

代码如下:




    //商品视频文件 上传方法  
      
    elseif ($_REQUEST['act'] == 'upload')  
      
    {  
      
        $goods_id=isset($_REQUEST['goods_id'])?$_REQUEST['goods_id']:"";  
      
       
      
        $sql="SELECT goods_video FROM ".$ecs->table("goods")." WHERE goods_id=".$goods_id;  
      
        $sql1="SELECT goods_name FROM ".$ecs->table("goods")." WHERE goods_id=".$goods_id;  
      
       
      
        $yuan=iconv('UTF-8','gb2312//IGNORE',$db->getOne($sql));//通过商品id 查询该商品的视频  
      
        $goods_name=$db->getOne($sql1);  
      
        //$yuan_dir="uploads/";//获得文件断点续传储存路径  
      
       
      
        $dir1=iconv('UTF-8','gb2312//IGNORE',$_POST['filename']);//用于中文转码   
      
        //ignore的意思是忽略转换时的错误,如果没有ignore参数,所有该字符后面的字符串都无法被保存  
      
        //允许上传的文件扩展名  
      
        $file_type = array( '.flv' ,'.rmvb' , '.mp4' );  
      
       
      
        $filetype='.'.substr(strrchr($dir1, "."),1);//截取获得文件后缀名  
      
       
      
        if(!in_array($filetype,$file_type))  
      
        {  
      
            echo "none";  
      
            return false;  
      
            die;  
      
        }  
      
        if($goods_name=="")  
      
        {  
      
            $name="video/".md5($_POST['filename'].date("Y-m-dH:i")).'/';  
      
       
      
        }else{  
      
       
      
            $name="video/".md5($goods_name).'/';//目录名  
      
        }  
      
          
      
       
      
        if(!is_dir($name)){  
      
       
      
            mkdir($name);  
      
        }  
      
       
      
        $dir2='admin/'.$name.$_POST['filename'];  
      
       
      
        $dir="uploads/".md5($dir1);  
      
        //还原文件原名   
      
           
      
        file_exists($dir) or mkdir($dir,0777,true);    
      
            
      
            
      
        $path=$dir."/".$_POST['blobname'];    
      
           
      
        //$sql="UPDATE ".$ecs->table('goods')." SET goods_video='".$dir2."' WHERE goods_id=".$goods_id;  
      
        //echo $sql;die;  
      
       
      
        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("$name".$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($name.$dir1))  
            {  
               //$db->query($sql);  
                echo $dir2; //'上传完成';  
            }    
        }  
    }  



然后,查找 /* 处理商品数据 */


找到 接值赋值的区域

接收传过来的 视频名称路径

代码:


    $goods_video=isset($_POST['goods_video'])?$_POST['goods_video']:'';//视频  
并在下方$sql语句中,添加字段和值

总共有三条$sql语句,都需要添加字段和值



在admin文件夹中创建video文件夹

修改ecshop数据库的ecs_goods表,添加一个goods_video字段varchar类型

添加完,就可以上传视频了

后台完成。

前台实现过程

1.在Language/common.php中写入


    $_LANG['goods_video'] = '商品视频:';  
在goods.dwt中显示



2.在goods.php中(189行)写入以下代码


    if($goods['goods_video']!=""){  
        $goods_url="http://www.seven.com/ECShop/upload/".$goods['goods_video'];  
        $goods['goods_video']='<video width="300" height="200" src="'.$goods_url.'" preload="none" controls="controls" ></video>';  
    }else{  
        $goods['goods_video']="该商品视频正在更新中,敬请期待!";  
    }  



3首先,复制goods.dwt第434行代码

粘贴,改为 视频或商品视频


最后在goods.dwt的489行后,回车,在其下,写入以下代码

 

      <blockquote>

      <!-- 视频 字段名-->

       {$goods.goods_video}

       </blockquote>

 

如图


这样,如果后台商品添加了视频,前台就可通过查看商品,查看视频了


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开