course-server/modules/Custom.Course.Backend/resources/views/course/video/form.blade.php

<input type="hidden" name="course_id" class="form-control" value="{{$id}}"/>
<input type="hidden" name="id" class="form-control" value="{{$coursevideo->id}}"/>
<div class="form-group">
    {!! Form::label('name','章节标题：', ['class' => 'col-md-2 control-label']) !!}
    <div class="col-md-9">
        <input type="text" class="form-control" name="name" value="{{$coursevideo->name }}"/>
    </div>
</div>

<div class="form-group">
    {!! Form::label('name','章节目录：', ['class' => 'col-md-2 control-label']) !!}
    <div class="col-md-9">
        <select class="form-control m-b " name="parent_id">
            <option value="0">请选择上级目录 (顶级目录无需选择)</option>
            @foreach($coursevideos as $key => $val)
                <option @if($coursevideo->parent_id == $val->id) selected
                        @endif value="{{$val->id}}">{{ $val->html }} @if($val->parent_id !=0 )
                        ﹂@endif {{ $val->name }}</option>

            @endforeach
        </select>
    </div>
</div>

<div class="form-group">
    {!! Form::label('name','章节封面：', ['class' => 'col-md-2 control-label']) !!}
    <div class="col-md-2" id="AuthorAvatarPicker">选择图片</div>
    <div class="col-md-3">
        <input type="hidden" name="cover" value="{{ $coursevideo->cover }}"/>
        <img class="banner-image" src="{{ $coursevideo->cover }}"
             style="max-width:360px;max-height:360px" alt="">
    </div>
</div>


<div class="form-group" id="aetherupload-wrapper">
    {!! Form::label('name','上传视频：', ['class' => 'col-md-2 control-label']) !!}
    <div class="col-md-8" id="container">
        <button type="button" class="btn btn-primary btn-lg active" id="pickfiles">上传文件</button>
        {{--        <a id="pickfiles">上传文件</a>--}}
        <input type="hidden" name="resource" id="resource" value="{{$coursevideo->resource}}">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                 style="width: 0%;">
                0%
            </div>
        </div>
        {{--        <input type="file" id="aetherupload-resource" onchange="aetherupload(this).upload()"/>--}}
        {{--        <div class="progress " style="height: 6px;margin-bottom: 2px;margin-top: 10px;width: 200px;">--}}
        {{--            <div id="aetherupload-progressbar" style="background:blue;height:6px;width:0;"></div>--}}
        {{--        </div>--}}
        {{--        <span style="font-size:12px;color:#aaa;" id="aetherupload-output"></span>--}}
        {{--        <input type="hidden" name="resource" id="aetherupload-savedpath" value="{{$coursevideo->resource}}">--}}
    </div>
</div>

<div class="form-group">
    {!! Form::label('name','章节简介：', ['class' => 'col-md-2 control-label']) !!}
    <div class="col-md-9">
        <textarea class="form-control" name="description">{{$coursevideo->description}}</textarea>
    </div>
</div>

<div class="form-group">
    {!! Form::label('sort','排序：', ['class' => 'col-md-2 control-label']) !!}
    <div class="col-md-9">
        <input type="number" class="form-control" name="sort" value="{{$coursevideo->sort }}"/>
    </div>
</div>

<div class="hr-line-dashed"></div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-8 controls">
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
</div>

{{--<script src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>--}}
<script src="/js/qiniu.min.js"></script>
<script>
    // $(function () {
    //     $('.progress .progress-bar').width(20);
    //     $('.progress .progress-bar').text(20 + '%');
    // })

    var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'pickfiles',       //上传选择的点选按钮，**必需**
        uptoken_url: '/admin/course/t',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        // uptoken : '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        // unique_names: true, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        // save_key: true,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
        domain: 'http://resource.course.tianzhihua.cn/',   //bucket 域名，下载资源时用到，**必需**
        get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
        container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '1000mb',           //最大文件体积限制
        flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function (up, files) {
                plupload.each(files, function (file) {
                    // 文件添加进队列后,处理相关的事情
                });
            },
            'BeforeUpload': function (up, file) {
                // 每个文件上传前,处理相关的事情
            },
            'UploadProgress': function (up, file) {
                // 每个文件上传时,处理相关的事情
                $('.progress .progress-bar').css('width', file.percent + '%');
                $('.progress .progress-bar').text(file.percent + '%');
                // console.log(file.percent)
            },
            'FileUploaded': function (up, file, info) {
                console.log(up, file)
                var res = JSON.parse(info.response);

                $('#resource').val(res.key)
            },
            'Error': function (up, err, errTip) {
                //上传出错时,处理相关的事情
            },
            'UploadComplete': function () {
                //队列文件处理完毕后,处理相关的事情
            },
            'Key': function (up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效

                var key = "";
                // do something with key here
                return key
            }
        }
    });
</script>

{{--<script type="text/javascript">--}}
{{--    qiniu.upload({--}}
{{--        runtimes: 'html5,flash,html4',--}}
{{--        browse_button: 'AuthorAvatarPicker',--}}
{{--        flash_swf_url: 'https://cdn.bootcss.com/plupload/2.1.1/Moxie.swf',--}}
{{--        chunk_size: '4mb',--}}
{{--        uptoken: 'xozWSPMxkMjIVoHg2JyXq4-7-oJaEADLOKHVR0vU:HpzPL-1S10uavBUePK5JcaoA4WY=:eyJkZWxldGVBZnRlckRheXMiOjcsInNjb3BlIjoianNzZGsiLCJkZWFkbGluZSI6MTUxOTM4NjQ4MX0=',--}}
{{--        // uptoken_url: 'http://jssdk.demo.qiniu.io/uptoken',--}}
{{--        domain: 'http://resource.course.tianzhihua.cn/',--}}
{{--        get_new_uptoken: false,--}}
{{--        auto_start: true,--}}
{{--        max_retries: 3,--}}
{{--        filters: {--}}
{{--            max_file_size: '10000mb',--}}
{{--            prevent_duplicates: false--}}
{{--            // Specify what files to browse for--}}
{{--            // mime_types: [--}}
{{--            //     {title : 'apk files', extensions : 'apk'} // 限定apk后缀上传格式上传--}}
{{--            // ]--}}
{{--        },--}}
{{--        init: {--}}
{{--            'FilesAdded': (up, files) => {--}}
{{--                console.log('文件就绪', files);--}}
{{--            },--}}
{{--            BeforeUpload: (up, file) => {--}}
{{--                console.log('上传之前', file);--}}
{{--            },--}}
{{--            UploadProgress: (up, file) => {--}}
{{--                console.log('上传中 file',file);--}}
{{--                this.progress = file.percent + '%';--}}
{{--            },--}}
{{--            FileUploaded: (up, file, info) => {--}}
{{--                console.log('文件上传完毕')--}}
{{--            },--}}
{{--            Error: (up, err, errTip) => {--}}
{{--                console.log('上传失败', err);--}}
{{--            },--}}
{{--            Key: (up, file) => {}--}}
{{--        }--}}
{{--    });--}}
{{--</script>--}}

{{--<script src="{{ URL::asset('vendor/aetherupload/js/spark-md5.min.js') }}"></script><!--（可选）需要引入spark-md5.min.js，用以支持秒传功能-->--}}
{{--<script src="{{ URL::asset('vendor/aetherupload/js/aetherupload.js') }}"></script><!--需要引入aetherupload.js-->--}}
{{--<script>--}}
{{--    // success(someCallback)中声名的回调方法需在此定义，参数someCallback可为任意名称，此方法将会在上传完成后被调用--}}
{{--    // 可使用this对象获得resourceName,resourceSize,resourceTempBaseName,resourceExt,groupSubdir,group,savedPath等属性的值--}}
{{--    someCallback = function () {--}}
{{--        // Example--}}
{{--        $('#result').append(--}}
{{--            '<p>执行回调 - 文件已上传，原名：<span >' + this.resourceName + '</span> | 大小：<span >' + parseFloat(this.resourceSize / (1000 * 1000)).toFixed(2) + 'MB' + '</span> | 储存名：<span >' + this.savedPath.substr(this.savedPath.lastIndexOf('_') + 1) + '</span></p>'--}}
{{--        );--}}
{{--    }--}}

{{--</script>--}}