昨天接到客戶的需求 要求在商品詳情頁(yè)面輪播圖哪里添加個(gè)視頻。類似淘寶商品詳情可以在輪播圖看視頻的功能。
這個(gè)需求其實(shí)很好做，只要在上傳商品輪播圖的地方上傳視頻就可以了。這是最簡(jiǎn)潔的辦法。
只是客戶這個(gè)項(xiàng)目是TPshop框架做的，使用過(guò)TPshop框架的都知道，他們?cè)谏蟼魃唐穲D片這塊做了限制，上傳不了大文件。而我又不想該他們的代碼，就偷了個(gè)巧。我先將視頻用Ajax上傳到后臺(tái)存儲(chǔ)，返回路徑給到后臺(tái)。然后正常提交給商品數(shù)據(jù)給后臺(tái)就好了

話不多說(shuō) 上代碼

上傳視頻前端代碼

<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>如果你無(wú)法看到該視頻,那么可能你的電腦不支持該文件格式。</p></div></div></dd></dl><script>// ajax上傳視頻返回路徑$("#btn_uploadimg").click(function(){var fileObj = document.getElementById("FileUpload").files[0]; // js 獲取文件對(duì)象if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {alert("請(qǐng)選擇圖片");return;}var formFile = new FormData();formFile.append("action", "UploadVMKImagePath");formFile.append("file", fileObj); //加入文件對(duì)象var data = formFile;$.ajax({url: "/Admin/Custom/VMKHandler",data: data,type: "Post",dataType: "json",cache: false,//上傳文件無(wú)需緩存processData: false,//用于對(duì)data參數(shù)進(jìn)行序列化處理 這里必須falsecontentType: false, //必須success: function (result) {console.log(result);alert(result.msg);$("#video").val(result.data.file);}})});</script>

PHP后臺(tái)代碼

// 上傳視頻public function VMKHandler(){$file = my_get_file($_FILES);if($file){return AjaxReturn(['status'=>200,'msg'=>"成功",'data'=>$file]);}return AjaxReturn(['status'=>300,'msg'=>"失敗"]);}

完了再上傳提交商品數(shù)據(jù)在做個(gè)處理

// 判斷商品是否是更新視頻文件 是刪除原視頻文件$video = I("video");if(!empty($video)){$oldvideo = M('goods')->where("goods_id = $goods_id")->getField('video');if(!empty($oldvideo)){delpath($oldvideo);}}

common.php 的文件

/** 上傳商品音頻文件* 文件存儲(chǔ)在public/goods/goodsfile/2018/201801/20170105125362.jpg**/ function my_get_file($arr_files) {// 文件存儲(chǔ)目錄$dir = "/public/goods/goodsfile/" . date("Y") . "/" . date("Ym") . "/";// 遞歸檢測(cè)是否存在該目錄 如果沒(méi)有則新建!file_exists("." . $dir) && mkdir("." . $dir, 0777, true);// 循環(huán)數(shù)據(jù)獲取到文件路徑$arrdata = [];foreach ($arr_files as $key => $val) {//圖片上傳不能超過(guò)30Mif ($val['size'] > 80 * 1024 * 1024) {return ['status' => false, 'msg' => "文件過(guò)大"];}//給文件重命名，盡量不要起中文名字,如下以時(shí)間戳+隨機(jī)數(shù)重命名$filename = $dir . date("YmdHis") . rand(100000, 999999);//獲取文件的后綴,pathinfo()會(huì)以數(shù)組的形式返回一個(gè)文件的路徑信息，其中extension元素則是文件的后綴名$ext = pathinfo($val['name'])['extension'];//最終文件名為$filename = $filename . '.' . $ext;//設(shè)置文件上傳到服務(wù)器后存放的位置,move_uploaded_file()會(huì)將文件移動(dòng)到新位置，第一個(gè)參數(shù)是要移動(dòng)的文件，第二個(gè)參數(shù)是移動(dòng)到哪里。我在這里是放到和本php文件同一目錄下，注意需要將新的文件名連接進(jìn)去。if (move_uploaded_file($val['tmp_name'], '.' . $filename)) {$arrdata[$key] = $filename;}}return $arrdata; }// 刪除文件 function delpath($path){return unlink(".".$path);}

總結(jié)

以上是生活随笔為你收集整理的Ajax上传视频文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。