ecshop二次开发之视频上传

1.前台展示效果：

2.后台展示效果：

3.代码实现：

后台实现过程：

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

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标签中将下面代码粘贴在下图之上

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

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

代码如下：

1. //商品视频文件 上传方法
2. elseif ($_REQUEST['act'] == 'upload')
3. {
4. $goods_id=isset($_REQUEST['goods_id'])?$_REQUEST['goods_id']:"";
5. $sql="SELECT goods_video FROM ".$ecs->table("goods")." WHERE goods_id=".$goods_id;
6. $sql1="SELECT goods_name FROM ".$ecs->table("goods")." WHERE goods_id=".$goods_id;
7. $yuan=iconv('UTF-8','gb2312//IGNORE',$db->getOne($sql));//通过商品id 查询该商品的视频
8. $goods_name=$db->getOne($sql1);
9. //$yuan_dir="uploads/";//获得文件断点续传储存路径
10. $dir1=iconv('UTF-8','gb2312//IGNORE',$_POST['filename']);//用于中文转码
11. //ignore的意思是忽略转换时的错误，如果没有ignore参数，所有该字符后面的字符串都无法被保存
12. //允许上传的文件扩展名
13. $file_type = array( '.flv' ,'.rmvb' , '.mp4' );
14. $filetype='.'.substr(strrchr($dir1, "."),1);//截取获得文件后缀名
15. if(!in_array($filetype,$file_type))
16. {
17. echo "none";
18. return false;
19. die;
20. }
21. if($goods_name=="")
22. {
23. $name="video/".md5($_POST['filename'].date("Y-m-dH:i")).'/';
24. }else{
25. $name="video/".md5($goods_name).'/';//目录名
26. }
27. if(!is_dir($name)){
28. mkdir($name);
29. }
30. $dir2='admin/'.$name.$_POST['filename'];
31. $dir="uploads/".md5($dir1);
32. //还原文件原名
33. file_exists($dir) or mkdir($dir,0777,true);
34. $path=$dir."/".$_POST['blobname'];
35. //$sql="UPDATE ".$ecs->table('goods')." SET goods_video='".$dir2."' WHERE goods_id=".$goods_id;
36. //echo $sql;die;
37. move_uploaded_file($_FILES["file"]["tmp_name"],iconv('UTF-8','gb2312//IGNORE',$path));
38. if(isset($_POST['lastone'])){
39. //echo $_POST['lastone'];
40. $count=$_POST['lastone'];
41. $fp   = fopen("$name".$dir1,"abw");
42. for($i=0;$i<=$count;$i++){
43. $handle = fopen($dir."/".$i,"rb");
44. fwrite($fp,fread($handle,filesize($dir."/".$i)));
45. fclose($handle);
46. }
47. fclose($fp);
48. //通过文件是否存在 判断是否上传完成
49. if(file_exists($name.$dir1))
50. {
51. //$db->query($sql);
52. echo $dir2; //'上传完成';
53. }
54. }
55. }

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

找到 接值赋值的区域

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

代码：

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中写入

1. $_LANG['goods_video'] = '商品视频：';

在goods.dwt中显示

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

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>

如图

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