ecshop二次開發之視頻上傳

時間  2019-11-29
標籤 ecshop 二次開發 視頻 上傳 简体版
原文   原文鏈接

1.前臺展現效果：php

2.後臺展現效果：python


3.代碼實現：mysql

後臺實現過程：ajax

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

[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">裏cookie

而後，在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;width: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中建立一個上傳視頻的方法app

代碼以下：

[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>

 

如圖

這樣，若是後臺商品添加了視頻，前臺就可經過查看商品，查看視頻了
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程