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

話不多說 上代碼

上傳視頻前端代碼

<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參數(shù)進行序列化處理 這里必須falsecontentType: 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'=>"失敗"]);}

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

// 判斷商品是否是更新視頻文件 是刪除原視頻文件$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);// 循環(huán)數(shù)據(jù)獲取到文件路徑$arrdata = [];foreach ($arr_files as $key => $val) {//圖片上傳不能超過30Mif ($val['size'] > 80 * 1024 * 1024) {return ['status' => false, 'msg' => "文件過大"];}//給文件重命名，盡量不要起中文名字,如下以時間戳+隨機數(shù)重命名$filename = $dir . date("YmdHis") . rand(100000, 999999);//獲取文件的后綴,pathinfo()會以數(shù)組的形式返回一個文件的路徑信息，其中extension元素則是文件的后綴名$ext = pathinfo($val['name'])['extension'];//最終文件名為$filename = $filename . '.' . $ext;//設(shè)置文件上傳到服務(wù)器后存放的位置,move_uploaded_file()會將文件移動到新位置，第一個參數(shù)是要移動的文件，第二個參數(shù)是移動到哪里。我在這里是放到和本php文件同一目錄下，注意需要將新的文件名連接進去。if (move_uploaded_file($val['tmp_name'], '.' . $filename)) {$arrdata[$key] = $filename;}}return $arrdata; }// 刪除文件 function delpath($path){return unlink(".".$path);}

總結(jié)

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

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