Ajax上传视频文件

1 篇文章 0 订阅
1 篇文章 0 订阅

昨天接到客户的需求 要求在商品详情页面轮播图哪里添加个视频。类似淘宝商品详情可以在轮播图看视频的功能。
这个需求其实很好做,只要在上传商品轮播图的地方上传视频就可以了。这是最简洁的办法。
只是客户这个项目是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);

}
评论 3 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

魔君归来

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值