ecshop二次开发之视频上传

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 />
<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中显示

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']="该商品视频正在更新中，敬请期待！";
}