zoukankan      html  css  js  c++  java

  • ecshop二次开发之视频上传

    1.前台展示效果：

    2.后台展示效果：


    3.代码实现：

    后台实现过程：

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

    [python] view plain copy 在CODE上查看代码片派生到我的代码片
    1. $_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 在CODE上查看代码片派生到我的代码片
    1. <table width="90%" id="video-table" align="center" style="display:none;">  
    2.         <tr>  
    3.         <td>   
    4.             <div  id="drop_area" style="border:3px solid red;200px; height:150px">    
    5.                 将将你所需上传视频拖拽到此即可    
    6.             </div>    
    7.               <input type="hidden" id="video_val" name="goods_video">  
    8.             <progress value="0" max="10" id="prouploadfile"></progress>    
    9.                 
    10.             <span id="persent">0%</span>    
    11.             <br />    
    12.             <!--<button onclick="xhr2()">ajax上传</button>-->       
    13.             <input type="button" onclick="stopup()" id="stop" value="上传">       
    14.             <script>    
    15.             //拖拽上传开始    
    16.             //-1.禁止浏览器打开文件行为    
    17.             document.addEventListener("drop",function(e){  //拖离     
    18.                 e.preventDefault();        
    19.             })    
    20.             document.addEventListener("dragleave",function(e){  //拖后放     
    21.                 e.preventDefault();        
    22.             })    
    23.             document.addEventListener("dragenter",function(e){  //拖进    
    24.                 e.preventDefault();        
    25.             })    
    26.             document.addEventListener("dragover",function(e){  //拖来拖去      
    27.                 e.preventDefault();        
    28.             })    
    29.             //上传进度    
    30.             var pro = document.getElementById('prouploadfile');    
    31.             var persent = document.getElementById('persent');    
    32.             function clearpro(){    
    33.                 pro.value=0;    
    34.                 persent.innerHTML="0%";    
    35.             }            
    36.             //2.拖拽    
    37.             var stopbutton = document.getElementById('stop');    
    38.                 
    39.             var resultfile="";  
    40.             var box = document.getElementById('drop_area'); //拖拽区域       
    41.             box.addEventListener("drop",function(e){             
    42.                 var fileList = e.dataTransfer.files; //获取文件对象      
    43.                 console.log(fileList)  
    44.                 //检测是否是拖拽文件到页面的操作              
    45.                 if(fileList.length == 0){                  
    46.                     return false;              
    47.                 }  
    48.  //判断文件大小  
    49.                 var num=1048576;  
    50.                 var cha=Math.ceil(fileList[0].size)/num;  
    51.                 if(cha>200)  
    52.                 {  
    53.                     alert(Math.ceil(fileList[0].size/num));  
    54.                     var str="<font color='red'>请选取文件在200M以下的视频</font>";  
    55.                     document.getElementById('drop_area').innerHTML=str;  
    56.                     return false;  
    57.                 }             
    58.                 //拖拉图片到浏览器，可以实现预览功能      
    59.                 //规定视频格式    
    60.                 //in_array    
    61.                 Array.prototype.S=String.fromCharCode(2);    
    62.                 Array.prototype.in_array=function(e){    
    63.                     var r=new RegExp(this.S+e+this.S);    
    64.                     return (r.test(this.S+this.join(this.S)+this.S));    
    65.                 };    
    66.                 var video_type=["video/mp4","video/ogg"];    
    67.                     
    68.                 //创建一个url连接,供src属性引用    
    69.                 var fileurl = window.URL.createObjectURL(fileList[0]);                  
    70.                 if(fileList[0].type.indexOf('image') === 0){  //如果是图片    
    71.                     var str="<img width='200px' height='200px' src='"+fileurl+"'>";    
    72.                     document.getElementById('drop_area').innerHTML=str;                     
    73.                 }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频                      
    74.                     var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";    
    75.                     document.getElementById('drop_area').innerHTML=str;          
    76.                 }else{ //其他格式，输出文件名    
    77.                     //alert("不预览");    
    78.                     var str="文件名字:"+fileList[0].name;    
    79.                     document.getElementById('drop_area').innerHTML=str;        
    80.                 }           
    81.                 resultfile = fileList[0];       
    82.                 console.log(resultfile);        
    83.                     
    84.                 //切片计算    
    85.                 filesize= resultfile.size;    
    86.                 setsize=500*1024;    
    87.                 filecount = filesize/setsize;    
    88.                 //console.log(filecount)    
    89.                 //定义进度条    
    90.                 pro.max=parseInt(Math.ceil(filecount));     
    91.                     
    92.                     
    93.                     
    94.                 i =getCookie(resultfile.name);    
    95.                 i = (i!=null && i!="")?parseInt(i):0;  
    96.                     
    97.                 if(Math.floor(filecount)<i){    
    98.                     alert("已经完成");    
    99.                     pro.value=i+1;    
    100.                     persent.innerHTML="100%";    
    101.                     
    102.                 }else{    
    103.                     alert('可以上传');    
    104.                     pro.value=i;    
    105.                     p=parseInt(i)*100/Math.ceil(filecount)    
    106.                     persent.innerHTML=parseInt(p)+"%";    
    107.                 }    
    108.                     
    109.             },false);      
    110.                 
    111.             //3.ajax上传    
    112.           
    113.             var stop=1;    
    114.             function xhr2(){    
    115.                 if(stop==1){    
    116.                     return false;    
    117.                 }    
    118.                 if(resultfile==""){    
    119.                     alert("请选择文件")    
    120.                     return false;    
    121.                 }    
    122.                 i=getCookie(resultfile.name);    
    123.                 console.log(i)    
    124.                 i = (i!=null && i!="")?parseInt(i):0    
    125.                     
    126.                 if(Math.floor(filecount)<parseInt(i)){    
    127.                     alert("已经完成");  
    128.                     return false;    
    129.                 }else{    
    130.                     //alert(i)    
    131.                 }    
    132.                 var xhr = new XMLHttpRequest();//第一步    
    133.                 //新建一个FormData对象    
    134.                 var formData = new FormData(); //++++++++++    
    135.                 //追加文件数据    
    136.                     
    137.                 //改变进度条    
    138.                 pro.value=i+1;    
    139.                 p=parseInt(i+1)*100/Math.ceil(filecount)    
    140.                 persent.innerHTML=parseInt(p)+"%";    
    141.                 //进度条    
    142.                     
    143.                     
    144.                 if((filesize-i*setsize)>setsize){    
    145.                     blobfile= resultfile.slice(i*setsize,(i+1)*setsize);    
    146.                 }else{    
    147.                     blobfile= resultfile.slice(i*setsize,filesize);    
    148.                     formData.append('lastone', Math.floor(filecount));    
    149.                 }    
    150.                     formData.append('file', blobfile);   
    151.                     formData.append('goods_id', "{$goods.goods_id}");   
    152.                     //return false;    
    153.                     formData.append('blobname', i); //++++++++++    
    154.         　　      formData.append('filename', resultfile.name); //++++++++++    
    155.                     //post方式    
    156.                     xhr.open('POST', 'goods.php?act=upload'); //第二步骤    
    157.                     //发送请求    
    158.                     xhr.send(formData);  //第三步骤    
    159.                     stopbutton.innerHTML = "暂停"    
    160.                     //ajax返回    
    161.                     xhr.onreadystatechange = function(){ //第四步    
    162.                 　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {    
    163.                 　　　　　　console.log( xhr.responseText );    
    164.                             if(xhr.responseText=="none"){    
    165.                                 alert("视频格式不支持");  
    166.                                 persent.innerHTML="0%";  
    167.                                 document.getElementById("drop_area").innerHTML="支持视频格式为'.flv' ,'.rmvb' , '.mp4'";  
    168.                                 pro.value=0;  
    169.                                 return false;  
    170.                             }else if(i<filecount){  
    171.                                 xhr2();  
    172.                             }else{    
    173.                                 alert(xhr.responseText);  
    174.                                 clearCookie(resultfile.name);  
    175.                                 document.getElementById("video_val").value=xhr.responseText;    
    176.                                 //location.href="文件";  
    177.                             }           
    178.                 　　　　}    
    179.                 　　};    
    180.                     //设置超时时间    
    181.                     xhr.timeout = 20000;    
    182.                     xhr.ontimeout = function(event){    
    183.                 　　　　alert('请求超时，网络拥堵！低于25K/s');    
    184.                 　　}             
    185.                         
    186.                     i=i+1;    
    187.                     setCookie(resultfile.name,i,365)    
    188.                         
    189.             }    
    190.                 
    191.             //设置cookie    
    192.             function setCookie(c_name,value,expiredays)    
    193.             {    
    194.                 var exdate=new Date()    
    195.                 exdate.setDate(exdate.getDate()+expiredays)    
    196.                 document.cookie=c_name+ "=" +escape(value)+    
    197.                 ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")    
    198.             }  
    199.             //清除cookie    
    200.             function clearCookie(name) {    
    201.                 setCookie(name, "", -1);    
    202.             }  
    203.             //获取cookie    
    204.             function getCookie(c_name)    
    205.             {    
    206.             if (document.cookie.length>0)    
    207.               {    
    208.               c_start=document.cookie.indexOf(c_name + "=")    
    209.               if (c_start!=-1)    
    210.                 {     
    211.                 c_start=c_start + c_name.length+1     
    212.                 c_end=document.cookie.indexOf(";",c_start)    
    213.                 if (c_end==-1) c_end=document.cookie.length    
    214.                 return unescape(document.cookie.substring(c_start,c_end))    
    215.                 }     
    216.               }    
    217.             return ""    
    218.             }    
    219.                 
    220.                 
    221.             function stopup(){    
    222.                 if(stop==1){    
    223.                     stop = 0    
    224.                         
    225.                     xhr2();    
    226.                 }else{    
    227.                     stop = 1    
    228.                     stopbutton.innerHTML = "继续"    
    229.                         
    230.                 }    
    231.                     
    232.             }    
    233.             </script>  
    234.             </td>  
    235.             </tr>  
    236.             </table>  

    然后，在admin/goods.php中创建一个上传视频的方法

    代码如下：

    [python] view plain copy 在CODE上查看代码片派生到我的代码片
    1. //商品视频文件 上传方法  
    2.   
    3. elseif ($_REQUEST['act'] == 'upload')  
    4.   
    5. {  
    6.   
    7.     $goods_id=isset($_REQUEST['goods_id'])?$_REQUEST['goods_id']:"";  
    8.   
    9.    
    10.   
    11.     $sql="SELECT goods_video FROM ".$ecs->table("goods")." WHERE goods_id=".$goods_id;  
    12.   
    13.     $sql1="SELECT goods_name FROM ".$ecs->table("goods")." WHERE goods_id=".$goods_id;  
    14.   
    15.    
    16.   
    17.     $yuan=iconv('UTF-8','gb2312//IGNORE',$db->getOne($sql));//通过商品id 查询该商品的视频  
    18.   
    19.     $goods_name=$db->getOne($sql1);  
    20.   
    21.     //$yuan_dir="uploads/";//获得文件断点续传储存路径  
    22.   
    23.    
    24.   
    25.     $dir1=iconv('UTF-8','gb2312//IGNORE',$_POST['filename']);//用于中文转码   
    26.   
    27.     //ignore的意思是忽略转换时的错误，如果没有ignore参数，所有该字符后面的字符串都无法被保存  
    28.   
    29.     //允许上传的文件扩展名  
    30.   
    31.     $file_type = array( '.flv' ,'.rmvb' , '.mp4' );  
    32.   
    33.    
    34.   
    35.     $filetype='.'.substr(strrchr($dir1, "."),1);//截取获得文件后缀名  
    36.   
    37.    
    38.   
    39.     if(!in_array($filetype,$file_type))  
    40.   
    41.     {  
    42.   
    43.         echo "none";  
    44.   
    45.         return false;  
    46.   
    47.         die;  
    48.   
    49.     }  
    50.   
    51.     if($goods_name=="")  
    52.   
    53.     {  
    54.   
    55.         $name="video/".md5($_POST['filename'].date("Y-m-dH:i")).'/';  
    56.   
    57.    
    58.   
    59.     }else{  
    60.   
    61.    
    62.   
    63.         $name="video/".md5($goods_name).'/';//目录名  
    64.   
    65.     }  
    66.   
    67.       
    68.   
    69.    
    70.   
    71.     if(!is_dir($name)){  
    72.   
    73.    
    74.   
    75.         mkdir($name);  
    76.   
    77.     }  
    78.   
    79.    
    80.   
    81.     $dir2='admin/'.$name.$_POST['filename'];  
    82.   
    83.    
    84.   
    85.     $dir="uploads/".md5($dir1);  
    86.   
    87.     //还原文件原名   
    88.   
    89.        
    90.   
    91.     file_exists($dir) or mkdir($dir,0777,true);    
    92.   
    93.         
    94.   
    95.         
    96.   
    97.     $path=$dir."/".$_POST['blobname'];    
    98.   
    99.        
    100.   
    101.     //$sql="UPDATE ".$ecs->table('goods')." SET goods_video='".$dir2."' WHERE goods_id=".$goods_id;  
    102.   
    103.     //echo $sql;die;  
    104.   
    105.    
    106.   
    107.     move_uploaded_file($_FILES["file"]["tmp_name"],iconv('UTF-8','gb2312//IGNORE',$path));    
    108.   
    109.       
    110.   
    111.     if(isset($_POST['lastone'])){    
    112.   
    113.         //echo $_POST['lastone'];    
    114.   
    115.         $count=$_POST['lastone'];    
    116.   
    117.             
    118.   
    119.         $fp   = fopen("$name".$dir1,"abw");    
    120.   
    121.         for($i=0;$i<=$count;$i++){    
    122.   
    123.             $handle = fopen($dir."/".$i,"rb");      
    124.             fwrite($fp,fread($handle,filesize($dir."/".$i)));      
    125.             fclose($handle);        
    126.         }    
    127.         fclose($fp);  
    128.         //通过文件是否存在 判断是否上传完成  
    129.         if(file_exists($name.$dir1))  
    130.         {  
    131.            //$db->query($sql);  
    132.             echo $dir2; //'上传完成';  
    133.         }    
    134.     }  
    135. }  
    然后，查找 /* 处理商品数据 */

    找到 接值赋值的区域

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

    代码：

    [python] view plain copy 在CODE上查看代码片派生到我的代码片
    1. $goods_video=isset($_POST['goods_video'])?$_POST['goods_video']:'';//视频  

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

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

    2.

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

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

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

    后台完成。

    前台实现过程

    1.在Language/common.php中写入

    [python] view plain copy 在CODE上查看代码片派生到我的代码片
    1. $_LANG['goods_video'] = '商品视频：';  
    在goods.dwt中显示

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

    [python] view plain copy 在CODE上查看代码片派生到我的代码片
    1. if($goods['goods_video']!=""){  
    2.     $goods_url="http://www.seven.com/ECShop/upload/".$goods['goods_video'];  
    3.     $goods['goods_video']='<video width="300" height="200" src="'.$goods_url.'" preload="none" controls="controls" ></video>';  
    4. }else{  
    5.     $goods['goods_video']="该商品视频正在更新中，敬请期待！";  
    6. }  

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

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


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

     

          <blockquote>

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

           {$goods.goods_video}

           </blockquote>

    如图


    这样，如果后台商品添加了视频，前台就可通过查看商品，查看视频了
  • 相关阅读:
    PTA A1005&A1006
    PTA A1003&A1004
    PTA A1001&A1002
    MOOC web前端开发笔记（二）
    MOOC web前端开发笔记（一）
    MOOC C++笔记（三）：类和对象提高
    MOOC C++笔记（二）：类和对象基础
    MOOC C++笔记（一）：从C到C++
    linux command tee
    modbus数据格式（一）
  • 原文地址：https://www.cnblogs.com/hehe520/p/6147484.html
Copyright © 2011-2022 走看看