昨天接到客户的需求 要求在商品详情页面轮播图哪里添加个视频。类似淘宝商品详情可以在轮播图看视频的功能。
这个需求其实很好做,只要在上传商品轮播图的地方上传视频就可以了。这是最简洁的办法。
只是客户这个项目是TPshop框架做的,使用过TPshop框架的都知道,他们在上传商品图片这块做了限制,上传不了大文件。而我又不想该他们的代码,就偷了个巧。我先将视频用Ajax上传到后台存储,返回路径给到后台。然后正常提交给商品数据给后台就好了
话不多说 上代码
上传视频前端代码
<dl class="row">
<dt class="tit">
<label>视频上传</label>
</dt>
<!--{$goodsInfo.original_img}-->
<dd class="opt">
<div class="input-file-show">
<div>
<input type="file" name="FileUpload" id="FileUpload">
<a class="layui-btn layui-btn-mini" id="btn_uploadimg">上传视频</a>
</div>
<div>
<input type="hidden" name="video" id="video">
<embed src="{$goodsInfo.video}" width="200" height="200" id="videos">
<p>如果你无法看到该视频,那么可能你的电脑不支持该文件格式。</p>
</div>
</div>
</dd>
</dl>
<script>
// ajax上传视频返回路径
$("#btn_uploadimg").click(function(){
var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
alert("请选择图片");
return;
}
var formFile = new FormData();
formFile.append("action", "UploadVMKImagePath");
formFile.append("file", fileObj); //加入文件对象
var data = formFile;
$.ajax({
url: "/Admin/Custom/VMKHandler",
data: data,
type: "Post",
dataType: "json",
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
success: function (result) {
console.log(result);
alert(result.msg);
$("#video").val(result.data.file);
}
})
});
</script>
PHP后台代码
// 上传视频
public function VMKHandler(){
$file = my_get_file($_FILES);
if($file){
return AjaxReturn(['status'=>200,'msg'=>"成功",'data'=>$file]);
}
return AjaxReturn(['status'=>300,'msg'=>"失败"]);
}
完了再上传提交商品数据在做个处理
// 判断商品是否是更新视频文件 是删除原视频文件
$video = I("video");
if(!empty($video)){
$oldvideo = M('goods')->where("goods_id = $goods_id")->getField('video');
if(!empty($oldvideo)){
delpath($oldvideo);
}
}
common.php 的文件
/*
* 上传商品音频文件
* 文件存储在public/goods/goodsfile/2018/201801/20170105125362.jpg
*
*/
function my_get_file($arr_files)
{
// 文件存储目录
$dir = "/public/goods/goodsfile/" . date("Y") . "/" . date("Ym") . "/";
// 递归检测是否存在该目录 如果没有则新建
!file_exists("." . $dir) && mkdir("." . $dir, 0777, true);
// 循环数据获取到文件路径
$arrdata = [];
foreach ($arr_files as $key => $val) {
//图片上传不能超过30M
if ($val['size'] > 80 * 1024 * 1024) {
return ['status' => false, 'msg' => "文件过大"];
}
//给文件重命名,尽量不要起中文名字,如下以时间戳+随机数重命名
$filename = $dir . date("YmdHis") . rand(100000, 999999);
//获取文件的后缀,pathinfo()会以数组的形式返回一个文件的路径信息,其中extension元素则是文件的后缀名
$ext = pathinfo($val['name'])['extension'];
//最终文件名为
$filename = $filename . '.' . $ext;
//设置文件上传到服务器后存放的位置,move_uploaded_file()会将文件移动到新位置,第一个参数是要移动的文件,第二个参数是移动到哪里。我在这里是放到和本php文件同一目录下,注意需要将新的文件名连接进去。
if (move_uploaded_file($val['tmp_name'], '.' . $filename)) {
$arrdata[$key] = $filename;
}
}
return $arrdata;
}
// 删除文件
function delpath($path){
return unlink(".".$path);
}