ecshop二次開發--視訊上傳
阿新 • • 發佈：2018-12-30
1.前臺展示效果：
2.後臺展示效果：
3.程式碼實現：
後臺實現過程：
1.在languages/zh_cn/admin/goods.php中插入
<span><span>$_LANG[</span><span class="string">'tab_video'</span><span>] = </span><span class="string">'視訊上傳'</span><span>;
</span></span>
2顯示標籤在admin/templates/goods_info.htm中 將<span class="tab-back" id="video-table">{$lang.tab_video}</span> 寫入到<div id="tabbar-div">裡
然後，在form標籤中將下面程式碼貼上在下圖之上<p><img src="https://img-blog.csdn.net/20160523154630820?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></p> <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中顯示
3首先，複製goods.dwt第434行程式碼
貼上，改為 視訊或商品視訊
最後在goods.dwt的489行後，回車，在其下，寫入以下程式碼
<blockquote>
<!-- 視訊 欄位名-->
{$goods.goods_video}
</blockquote>如圖
這樣，如果後臺商品添加了視訊，前臺就可通過檢視商品，檢視視訊了