ecshop二次開發之視訊上傳
阿新 • • 發佈：2019-01-24
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;
- }elseif(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;
- }elseif(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語句，都需要新增欄位和值
2.
在admin資料夾中建立video資料夾
修改ecshop資料庫的ecs_goods表，新增一個goods_video欄位varchar型別
新增完，就可以上傳視訊了
後臺完成。
前臺實現過程
1.在Language/common.php中寫入
- $_LANG['goods_video'] = '商品視訊：';
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>
如圖
這樣，如果後臺商品添加了視訊，前臺就可通過檢視商品，檢視視訊了