ecshop二次开发之视频上传

来源：互联网发布：bp神经网络算法流程图编辑：程序博客网时间：2024/05/21 07:50

1.前台展示效果：

2.后台展示效果：

3.代码实现：

后台实现过程：

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

[python] view plain copy
$_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标签中将下面代码粘贴在下图之上

[python] view plain copy
<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中创建一个上传视频的方法

代码如下：

[python] view plain copy
//商品视频文件 上传方法  
  
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; //'上传完成';  
        }    
    }  
}

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

找到接值赋值的区域

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

代码：

[python] view plain copy
$goods_video=isset($_POST['goods_video'])?$_POST['goods_video']:'';//视频  

并在下方$sql语句中，添加字段和值

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

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

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

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

后台完成。

前台实现过程

1.在Language/common.php中写入

[python] view plain copy
$_LANG['goods_video'] = '商品视频：';  

在goods.dwt中显示

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

[python] view plain copy
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行后，回车，在其下，写入以下代码

{$goods.goods_video}

</blockquote>

如图

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

阅读全文

0 0