码迷,mamicode.com
首页 > Web开发 > 详细

yii 上传视频(ajax)

时间:2019-08-24 23:00:04      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:key   auto   删除文件   pat   var   func   idt   load   bsp   

实现一个功能:提交表单的时候,需要上传视频,把视频上传到oss上,然后把url作为表单值传到后端保存到数据库。需要ajax异步实现。

  1. 页面表单
    <form class="auto-form" method="post" id="art_form" action="<?= \Yii::$app->urlManager->createAbsoluteUrl([‘mch/course/coursedir/add‘]);?>">
    <div class="form-group row">
         <div class="form-group-label col-sm-2 text-right">
             <label class="col-form-label required">上传完整视频</label>
         </div>
         <div class="col-sm-6">
              <input type="file" name="video" value=""/>
              <input type="text" name="video_url" value=""/>
              <img id="video" src="" alt="325×325" style="width:325px;height:325px;">
         </div>
    </div> //这是表单的一部分,要注意的是需要在<form id="art_form">code...</form>添加一个ID属性值,配合formData()

     

  2. ajax 发送数据(使用jquery)
    //上传视频, 这个url在yii里的写法是 index.php?r=moduleID/controllerID/actionID (写完整路径报错)
        url = ‘index.php?r=mch/course/coursedir/upload-video‘;
        var video = $(‘input[name="video"]‘);var csrf = $(‘input[name="_csrf"]‘).val();     //csrf 不传也没有报错,好像是不传也可以(不知道会不会有安全隐患,表单里是传了csrf的)这里没用
        video.click(function () {
            video.change(function () {
                var obj = this;
                var formData = new FormData($(‘#art_form‘)[0]);     //ajax 上传文件的时候,需要使用formData(),不要丢掉下标0
                $.ajax({
                    type: ‘post‘,
                    url: url+‘&fileName=video‘,    //fileName 参数是后端处理文件需要使用的
                    data: formData,      // 数据
                    //dataType: ‘json‘,
                    processData: false,
                    contentType: false,   //设置为false
                    success: function (data) {
                        if(data.status == 0){
                            //success
                            $(‘input[name="video_url"]‘).val(data.url);
                            $(‘#video‘).attr(‘src‘, data.url);
                            $(obj).off(‘change‘);
                        }else{
                            //fail
                        }
                    },
                    error: function (err) {
    
                    }
                })
            })
        })

     

  3. 服务器端处理文件并上传到oss里
    /**
         * 上传视频到oss,ajax返回视频url给页面
    * ajax传的fileName
    * 注意: 上传视频和上传图片不同, 需要修改php.ini文件里的upload_max_filesize 和 post_max_filesize 参数,默认好像只有几M ,肯定是不够的
    */ public function actionUploadVideo($fileName, $arr = [‘video/mp4‘], $fileSize=10000000) { //判断文件是否合法 $file = $_FILES[$fileName]; if($file[‘error‘]>0){ switch($file[‘error‘]){ case 1: case 2: return ‘文件过大‘; case 3: return ‘上传文件不完整,请重新上传‘; case 4: return ‘请选择文件‘; case 6: return ‘tmp不存在‘; case 7: return ‘没有权限‘; case 8: return ‘........‘; } } if(!in_array($file[‘type‘], $arr)){ return ‘上传文件类型不合法‘; } if($file[‘size‘]>$fileSize){ return ‘上传文件过大‘; } $suffix = strrchr($file[‘name‘], ‘.‘); $localdir = $file[‘tmp_name‘]; // 直接上传到oss 就不需要把文件从临时目录移动到服务器的目录里,直接从临时目录上传到oss 即可 //引入ossSDK include \Yii::$app->basePath.‘/extensions/aliyun-oss-php-sdk-2.2.4/autoload.php‘; //把视频上传到oss上 try{ $access_key = ‘LTAI9c666666‘; $secret_key = ‘f3zkCC666666‘; $domain = ‘http://oss-cn-shenzhen.aliyuncs.com‘; $bucket = ‘qa-xingzuo‘; $object = md5(time().uniqid()).$suffix; //文件名,要先获取上传的文件后缀 $ossClient = new OssClient($access_key, $secret_key, $domain); $exist = $ossClient->doesObjectExist($bucket, $object); //判断oss上是否已经存在要上传的文件 //$ossClient->deleteObject($bucket, $object); exit;//删除文件 if(!$exist){ $ossClient->uploadFile($bucket, $object, $localdir); } //unlink($localdir); //删除本地文件, 后期可以优化一下 $domain = explode(‘//‘, $domain); $url = ‘http://‘.$bucket.‘.‘.$domain[1].‘/‘.$object; //拼接访问路径,oss固定的访问格式 $data = [ ‘status‘ => 0, ‘msg‘ => ‘success‘, ‘url‘ => $url, ]; return $data; } catch(OssException $e) { printf(__FUNCTION__ . ": FAILED\n"); printf($e->getMessage() . "\n"); return; } }

     

yii 上传视频(ajax)

标签:key   auto   删除文件   pat   var   func   idt   load   bsp   

原文地址:https://www.cnblogs.com/bneglect/p/11406301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!