TP5.1+bootstrap+进度条上传文件

最新推荐文章于 2021-11-18 20:57:30 发布
最新推荐文章于 2021-11-18 20:57:30 发布
阅读量1k 收藏 2
点赞数
分类专栏： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43023551/article/details/103082383
版权

项目有一个上传文件需要用到上传进度条

网上找了很多 但是都效果甚微

可以多传文件

{include file="public/header" /}
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- begin  nav-->
    <!--<div class="m-subheader ">-->
    <!--<div class="d-flex align-items-center">-->
    <!--<div class="mr-auto">-->
    <!--<h5 class="m-subheader__title m-subheader__title&#45;&#45;separator">帖子管理</h5>-->
    <!--<ul class="m-subheader__breadcrumbs m-nav m-nav&#45;&#45;inline">-->
    <!--<li class="m-nav__item m-nav__item&#45;&#45;home">-->
    <!--<a href="{:url('/a/index')}" class="m-nav__link m-nav__link&#45;&#45;icon">-->
    <!--<i class="m-nav__link-icon la la-home" title="返回首页"></i>-->
    <!--</a>-->
    <!--</li>-->
    <!--<li class="m-nav__separator">></li>-->
    <!--<li class="m-nav__item">-->
    <!--<a href="{:url('/a/article-list')}" class="m-nav__link-text">帖子列表</a>-->
    <!--</li>-->
    <!--<li class="m-nav__separator">></li>-->
    <!--<li class="m-nav__item">-->
    <!--<span class="m-nav__link-text">添加帖子</span>-->
    <!--</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--<div>-->

    <!--</div>-->
    <!--</div>-->
    <!--</div>-->
    <!-- end -->

    <div class="m-content">
        <!--begin::Portlet-->
        <div class="m-portlet">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">发布视频</h3>
                    </div>
                </div>
                <!--<div class="m-portlet__head-tools">-->
                <!--<ul class="m-portlet__nav">-->
                <!--<li class="m-portlet__nav-item">-->
                <!--<a href="{:url('/a/article-list')}"-->
                <!--class="btn btn-focus m-btn m-btn&#45;&#45;custom m-btn&#45;&#45;pill m-btn&#45;&#45;icon m-btn&#45;&#45;air">-->
                <!--<span>-->
                <!--<i class="la la la-undo"></i>-->
                <!--<span>返回列表页</span>-->
                <!--</span>-->
                <!--</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
            </div>

            <h3 class="m-portlet__head-text" style="margin-left: 150px">
                视频信息
            </h3>

            <!--begin::Form-->
            <form class="m-form m-form--fit m-form--label-align-right formsubmit" enctype="multipart/form-data"
                 id="formvideosubmit"  method="post" action="../admin/video/savevideo"  >
                <div class="m-portlet__body">

                    <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12">发布课程名称:</label>
                        <div class="col-lg-7 col-md-7 col-sm-12">
                            <select data-live-search="true" class="form-control m-input m_selectpicker" name="prekey" id="prekey">
                                {foreach :model('products')->order('id desc')->select() as $value1}
                                <option value="{$value1.id}">{$value1.product_name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>


                    <div class="form-group m-form__group row"   id="showvideo" >

                    </div>

                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">课程标题:</label>-->
                        <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                            <!--<input type="text" class="form-control m-input" name="product_name" id="product_name">-->
                        <!--</div>-->
                    <!--</div>-->


                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">视频分类:</label>-->
                        <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                            <!--<select class="form-control m-input m_selectpicker" name="product_category" id="product_category">-->
                                <!--{foreach :model('mainCategory')->select() as $v}-->
                                <!--<option value="{$v.id}">{$v.name}</option>-->
                                <!--{/foreach}-->
                            <!--</select>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">视频归类:</label>-->
                        <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                            <!--<select class="form-control m-input m_selectpicker" name="product_own_category" id="product_own_category">-->
                                <!--{foreach :model('productCategory')->select() as $value}-->
                                <!--<option value="{$value.id}">{$value.category_name}</option>-->
                                <!--{/foreach}-->
                            <!--</select>-->
                        <!--</div>-->
                    <!--</div>-->


                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">视频收费:</label>-->
                        <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                            <!--<select class="form-control m-input m_selectpicker" name="fee" id="fee">-->
                                <!--<option value="none">&#45;&#45;请选择&#45;&#45;</option>-->
                                <!--<option value="0">免费</option>-->
                                <!--<option value="1">积分</option>-->
                                <!--<option value="2">人民币</option>-->
                            <!--</select>-->
                        <!--</div>-->
                    <!--</div>-->


                    <!--<div class="form-group m-form__group row price" style="">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">具体金额:</label>-->
                        <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                            <!--<input type="text" class="form-control m-input" name="product_price" id="product_price"-->
                                   <!--placeholder="免费时无需填写价格">-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12"> 视频简介</label>-->
                        <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                            <!--<textarea name="product_note" id="product_note" cols="162" rows="5" class="form-control" placeholder="请输入帖子说明" ></textarea>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="form-group m-form__group row price" style="">-->
                    <!--<label class="col-form-label col-lg-3 col-sm-12">具体金额:</label>-->
                    <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                    <!--<input type="text" class="form-control m-input" name="price" id="price"-->
                    <!--placeholder="免费时无需填写价格">-->
                    <!--</div>-->
                    <!--</div>-->

                    <!--图片上传部分-->

                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">视频封面:</label>-->
                        <!--<div class="col-md-4">-->
                            <!--<div class="fileinput fileinput-new" data-provides="fileinput">-->
                                <!--<div class="fileinput-preview thumbnail" data-trigger="fileinput"-->
                                     <!--style="width: 300px; height: 210px; border: 1px solid #e0e0e0;">-->
                                    <!--<img src=""/>-->
                                <!--</div>-->

                                <!--<span class="font-red sbold"></span>-->
                                <!--<div>-->
                                    <!--<span class="btn-outline btn-file">-->
                                        <!--<span class="fileinput-new btn btn-focus"> 选择图片 </span>-->
                                        <!--<span class="fileinput-exists btn btn-brand"> 更改 </span>-->
                                        <!--<input type="file" name="product_brand" id="product_brand">-->
                                    <!--</span>-->
                                    <!--<a href="javascript:;" class="btn btn-danger fileinput-exists"-->
                                       <!--data-dismiss="fileinput">移除 </a>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<span class="m-form__help m&#45;&#45;font-danger m&#45;&#45;block-inline"> 建议图标尺寸：320:180PX 图片格式：png,jpg,gif,jpeg-->
                                    <!--图片限制：2M以内 &#45;&#45;将来根据具体需求进行调整</span>-->
                        <!--</div>-->
                    <!--</div>-->


                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">效果图:</label>-->
                        <!--<label class="col-lg-1 col-form-label" style="color:red;">至少选择一个:</label>-->
                        <!--<div class="col-md-4">-->

                            <!--<ul id="media-list" class="clearfix">-->
                                <!--<li class="myupload">-->
                                <!--<span>-->
                                    <!--<i class="fa fa-plus" aria-hidden="true"></i>-->
                                    <!--<input type="file" click-type="type2" id="picUpload" class="picupload"  name="product_images">-->
                                <!--</span>-->
                                <!--</li>-->
                                <!--<input type="hidden" value="" name="imglist" id="imglist">-->

                            <!--</ul>-->
                        <!--</div>-->

                    <!--</div>-->


                    <!-- 上传视频 -->

                    <h3 class="m-portlet__head-text" style="margin-left: 150px">
                        上传视频
                    </h3>
                    <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12">视频目录:</label>
                        <div class="col-lg-7 col-md-7 col-sm-12">
                            <input type="text" class="form-control m-input" name="setnum" id="setnum">
                        </div>
                    </div>


                    <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12">视频标题:</label>
                        <div class="col-lg-7 col-md-7 col-sm-12">
                            <input type="text" class="form-control m-input" name="title" id="title">
                        </div>
                    </div>


                    <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12">上传视频:</label>
                        <input type=button id=filebutton onclick="browsefile.click()" class="btn m-btn m-btn&#45;&#45;gradient-from-info m-btn&#45;&#45;gradient-to-warning" value="上传视频" style="margin-left: 15px;">
                        <div style="display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap">
                            <input type="text" id="filepath" style="width:500px;" readonly>
                            <div class="progress" style="margin: auto;width: 500px;" >
                                <div class="progress" style="display:none;width: 100%">
                                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            </div>
                        </div>

                        <input type=file id=browsefile style="visibility:hidden" name="video" οnchange=filepath.value=this.value >




                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12">视频收费:</label>
                        <div class="col-lg-7 col-md-7 col-sm-12">
                            <select class="form-control m-input m_selectpicker" name="fee" id="fee">
                                <option value="4">--请选择--</option>
                                <option value="1">免费</option>
                                <option value="0">不免费</option>
                            </select>
                        </div>
                    </div>


                    <!--<div class="form-group m-form__group row price" style="">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">具体金额:</label>-->
                        <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                            <!--<input type="text" class="form-control m-input" name="product_price" id="product_price"-->
                                   <!--placeholder="免费时无需填写价格">-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="form-group m-form__group row">
                    <div class="col-lg-9 ml-lg-auto">
                        <button type="button" class="btn btn-brand" id="provideonext">继续上传下一个</button>
                    </div>
                    </div>
                    <!--<h3 class="m-portlet__head-text" style="margin-left: 150px">-->
                        <!--上传资源-->
                    <!--</h3>-->

                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12">资源链接:</label>-->
                        <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                            <!--<textarea name="link" id="link" cols="162" rows="7" class="form-control" placeholder="可上传多个链接"></textarea>-->
                            <!--<span class="m-form__help m&#45;&#45;font-danger m&#45;&#45;block-inline">注:多个链接建议用逗号相隔并回车</span>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="form-group m-form__group row">-->
                        <!--<label class="col-form-label col-lg-3 col-sm-12" style="">上传压缩包:</label>-->
                        <!--<input type=button id=filebutton1 οnclick="browsefile1.click()" class="btn m-btn m-btn&#45;&#45;gradient-from-info m-btn&#45;&#45;gradient-to-warning" value="点击上传" style="margin-left: 15px;">-->
                        <!--<input type="text" id="filepath1" style="width:500px;">-->
                        <!--<input type=file id="browsefile1" style="visibility:hidden" name="zip_content" οnchange=filepath1.value=this.value>-->
                    <!--</div>-->
                    <!--<div class="form-group m-form__group row">-->
                    <!--<label class="col-form-label col-lg-3 col-sm-12">帖子内容:</label>-->
                    <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                    <!--<div id="sendmsg"></div>-->
                    <!--</div>-->
                    <!--</div>-->

                    <!--<div class="form-group m-form__group row">-->
                    <!--<label class="col-form-label col-lg-3 col-sm-12">资源链接:</label>-->
                    <!--<div class="col-lg-7 col-md-7 col-sm-12">-->
                    <!--<textarea name="link" id="link" cols="162" rows="7" class="form-control" placeholder="可上传多个链接"></textarea>-->
                    <!--<span class="m-form__help m&#45;&#45;font-danger m&#45;&#45;block-inline">注:多个链接建议用逗号相隔并回车</span>-->
                    <!--</div>-->
                    <!--</div>-->


                    <!--<div class="form-group m-form__group row">-->
                    <!--<label class="col-form-label col-lg-3 col-sm-12" style="">上传压缩包:</label>-->
                    <!--<input type=button id=filebutton οnclick="browsefile.click()" class="btn m-btn m-btn&#45;&#45;gradient-from-info m-btn&#45;&#45;gradient-to-warning" value="点击上传" style="margin-left: 15px;">-->
                    <!--<input type="text" id="filepath" style="width:500px;">-->
                    <!--<input type=file id="browsefile" style="visibility:hidden" name="zip_content" οnchange=filepath.value=this.value>-->
                    <!--</div>-->

                </div>
                <div class="m-portlet__foot m-portlet__foot--fit">
                    <div class="m-form__actions m-form__actions">
                        <div class="row">
                            <div class="col-lg-9 ml-lg-auto">
                                <button type="button" class="btn btn-brand" id="provideosubmit">保存</button>
                            </div>

                        </div>


                    </div>

                </div>

            </form>

            <!--end::Form-->
        </div>

        <!--end::Portlet-->
    </div>
</div>
{include file="public/footer" /}





<script>
    $(function () {
        // 根据选择的帖子类型，显示出不同的帖子
        $('#fee').change(function () {
            var type = $(this).val();
            console.log(type);

            if (type == '1') {
                $('#product_price').css('display', 'none');
            } else {
                $('#product_price').css('display', '');

            }
        })
    })

</script>



<script>
    $(function () {




        // 根据选择的帖子类型，显示出不同的帖子
        $('body').on('change', "select[id=art_category]", function () {

            $.ajax({
                type: 'post',
                url: "{:url('admin/Article/get_tags')}",
                data: {'id': $(this).val()},
                success: function (info) {
                    console.log(info);
                    var art_cate_id = info.data[0]['art_cate_id'];
                    console.log(art_cate_id);
                    // return false;
                    $('select[id=tag_id] option').remove()
                    var str = '';
                    for (const key of info.data) {
                        str += `<option value="` + key.id + `">` + key.name + `</option>`
                    }
                    $('select[id=tag_id]').append(str)
                    $('#tag_id').selectpicker('refresh');
                    $('#tag_id').selectpicker('render');

                    /**
                     * 根据系统帖的类型判断是否显示 软件帖类型
                     */
                    if (art_cate_id == '9') {
                        $('.art_tag').css('display', '');
                    } else {
                        $('.art_tag').css('display', 'none');
                    }
                }
            })
        })

        $('#pay_type').change(function () {
            var type = $(this).val();
            // console.log(type);

            if (type == 0) {
                $('.price').css('display', 'none')
            } else {
                $('.price').css('display', '')

            }
        })


        $('body').on('click','.btndel',function(){
            var ids =$(this).val();
            $.ajax({
                url: '../admin/video/delvideonext', //Server script to process data
                type: 'POST',
                data: {'ids':ids},
                dataType: "json",

                //Ajax events
                success: function (res) {
                    if (res.code == 1) {
                        conslo.log('123')
                    } else {
                        return false
                    }

                    }

            });
        });



 $('#provideosubmit').click(function () {
           console.log(111111);
            var id = '#formvideosubmit';
            var fd = new FormData();
            // var video  = $('#browsefile')[0].files[0];
            // var zip_content = $('#browsefile1')[0].files[0];
            //
            // if (video){
            //     var file     = $("input[name='video']").val();
            //     var filename = file.replace(/.*(\/|\\)/, "");
            //     var fileExt  = (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : '';
            //     if (fileExt != 'rm' || fileExt != 'mov' || fileExt != 'mp4' || fileExt != 'rmvb' || fileExt != 'AVI'){
            //         $('#kmsg').text('文件后缀必须为.mov或mp4或rmvb或AVI或rm');
            //         return false;
            //     }else{
            //         $('#kmsg').text('');
            //     }
            //
            //     fd.append('video',video);
            // }
            //
            // if (zip_content){
            //     var file1     = $("input[name='zip_content']").val();
            //     var filename1 = file1.replace(/.*(\/|\\)/, "");
            //     var fileExt1  = (/[.]/.exec(filename1)) ? /[^.]+$/.exec(filename1.toLowerCase()) : '';
            //
            //     if (fileExt1 != 'zip' || fileExt1 != 'rar' || fileExt1 != 'arj'){
            //         $('#cmsg').text('文件后缀必须为.zip或rar');
            //         return false;
            //     }else{
            //         $('#cmsg').text('');
            //     }
            //
            //     fd.append('zip_content',zip_content);
            // }
            var artText = $('#sendmsg').summernote('code');
            fd.append('prekey', $('#prekey').val());   //发布课程id
            // fd.append('product_name', $('#product_name').val()); //课程标题
            // fd.append('product_category', $('#product_category').val()); //视频分类
            // fd.append('product_own_category', $('#product_own_category').val()); //视频归类
            // fd.append('fee', $('#fee').val()); //视频收费
            // fd.append('product_price', $('#product_price').val()); //具体金额
            // fd.append('product_note', $('#product_note').val()); //视频简介
            // fd.append('product_images', $('#imglist').val()); //效果图
            fd.append('setnum', $('#setnum').val()); //视频目录
            fd.append('title', $('#title').val()); //视频标题
            fd.append('fee', $('#fee').val()); //视频标题
            // fd.append('link', $('#link').val()); //资源链接
            fd.append('main_img',$('div.thumbnail img').attr('src')); //视频封面
            fd.append('video',$('#browsefile')[0].files[0]); //上传商品视频
            // fd.append('product_brand',$('#product_brand')[0].files[0]); //上传视频封面
            // fd.append('zip_content',$('#browsefile1')[0].files[0]); //上传压缩包
            $('.progress').show();
            $.ajax({
                type: "POST",
                url: "../admin/video/savevideo",
                data: fd,
                async: true,
                processData: false,
                contentType: false,
                cache:false,
                xhr: function() {
                    var xhr = $.ajaxSettings.xhr()
                    if(xhr.upload){
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                console.log(percentComplete);
                                percentComplete = parseInt(percentComplete * 100);
                                try {
                                    $('.progress-bar').css('width',percentComplete+"%");
                                }catch (e) {
                                    throw new Error(e)
                                }

                                $('.progress-bar').html(percentComplete+"%");
                                if (percentComplete === 100) {

                                }
                            }
                        }, false);
                    }
                    return xhr;
                },

                success: function (data) {
                    //成功
                    if (data.code == 1) {
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000)
                    } else {
                        return false
                    }
                    //提示窗口
                    swal({
                        title: "提示",
                        text: data.msg
                    });
                    mApp.unblock(id);
                }
            })
        })



        $('#provideonext').click(function () {
            var id = '#formvideosubmit';
            var fd = new FormData();
            fd.append('prekey', $('#prekey').val());   //发布课程id
            fd.append('setnum', $('#setnum').val()); //视频目录
            fd.append('title', $('#title').val()); //视频标题
            fd.append('fee', $('#fee').val()); //视频标题
            fd.append('video',$('#browsefile')[0].files[0]); //上传商品视频
            $('.progress').show();
            console.log('reset bar')
            $('.progress-bar').css('width',0+"%")
            $('.progress-bar').html(0+"%");
            $.ajax({
                type: "POST",
                url: "../admin/video/savevideonext",
                data: fd,
                async: true,
                processData: false,
                contentType: false,

                // beforeSend: () => {
                //     mApp.block(id, {
                //         overlayColor: '#000000',
                //         type: 'loader',
                //         state: 'success',
                //         message: '处理中...'
                //     });
                //     return true;
                // },
                cache:false,
                xhr: function() {
                    var xhr = $.ajaxSettings.xhr()
                    if(xhr.upload){
                        xhr.upload.addEventListener("progress", function(evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                console.log(percentComplete);
                                percentComplete = parseInt(percentComplete * 100);
                                try {
                                    $('.progress-bar').css('width',percentComplete+"%");
                                }catch (e) {
                                    throw new Error(e)
                                }

                                $('.progress-bar').html(percentComplete+"%");
                                if (percentComplete === 100) {

                                }
                            }
                        }, false);
                    }
                    return xhr;
                },

                success: function (data) {
                    console.log(data);
                    console.log('reset bar')
                    $('.progress-bar').css('width',0+"%")
                    $('.progress-bar').html(0+"%");
                    //成功
                    if (data.code == 1) {
                        console.log(data);
                        $("input[id='setnum']").val("");
                        $("input[id='title']").val("");
                        $("input[id='filepath']").val("");
                        $("input[id='browsefile']").val("");

                        var str = '';
                        str += ` <label class="col-form-label col-lg-3 col-sm-12">视频:</label>
                           <div class="col-lg-7 col-md-7 col-sm-12">
                           <button type="button" class="btndel btn-brand" value="`+data.data.getchaptid+`&`+data.data.getvideoid+`">删除</button>
                           <input type="text" class="form-control m-input" readonly="readonly" name="" value="`+data.data.title+`">
                           <input type="text" class="form-control m-input" readonly="readonly" value="`+data.data.setnum+`">
                           <video width="300" height="150" controls>
                           <source src="`+data.data.videosrc+`" type="video/mp4"><source>
                           </video>
                           <input type="hidden" value="`+data.data.videosrc+`">
                           </div>`;
                        $('#showvideo').append(str);
                    } else {
                        return false
                    }
                    //提示窗口
                    swal({
                        title: "提示",
                        text: data.msg
                    });
                    mApp.unblock(id);
                }
            })
        });
    })
</script>
<style>
    #media-list li img {
        width: 100px;
        height: 100px
    }

    #media-list2 li img {
        width: 100px;
        height: 100px
    }

    #media-list li {
        height: 102px
    }

    #media-list2 li {
        height: 102px
    }

    li.myupload span {
        position: relative;
        width: 100px;
        height: 100px;
        display: block;
        background: #fff
    }

    li.myupload span input {
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    li.myupload span i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ccc;
        font-size: 54px
    }

    #media-list li {
        float: left;
        border: 1px solid #ccc;
        background: #ccc;
        position: relative;
        margin: 0 5px 5px 0;
        width: 102px
    }

    #media-list2 li {
        float: left;
        border: 1px solid #ccc;
        background: #ccc;
        position: relative;
        margin: 0 5px 5px 0;
        width: 102px
    }


    #media-list li:last-child {
        margin-right: 0
    }

    #media-list2 li:last-child {
        margin-right: 0
    }

    .post-thumb {
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: none
    }

    #media-list li:hover .post-thumb {
        display: block
    }

    #media-list2 li:hover .post-thumb {
        display: block
    }

    a.remove-pic {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 12px;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 50%;
        display: block;
        height: 25px;
        width: 25px;
        text-align: center;
        padding: 3px 0
    }

    .inner-post-thumb {
        position: relative
    }

    .user-post-text-wrap {
        position: relative
    }

    .user-pic-post {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 0;
        left: 0
    }

    .user-pic-post img {
        width: 100%
    }

    .user-txt-post {
        padding: 0 0 0 65px
    }

    textarea.form-control.upostTextarea {
        border: 0;
        box-shadow: none;
        height: 85px;
        resize: none
    }

    .user-post-text-wrap {
        border-bottom: 1px solid #ccc;
        margin: 0 0 15px
    }

    .user-post-btn-wrap {
        margin: 25px 0 0
    }

    ul.btn-nav {
        list-style: none;
        padding: 0;
        margin: 0
    }

    ul.btn-nav li {
        position: relative;
        float: left;
        margin: 0 10px 0 0
    }

    ul.btn-nav li span input {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 9;
        opacity: 0;
        filter: alpha(opacity=100)
    }

    ul#media-list {
        list-style: none;
        padding: 0;
        margin: 0
    }

    ul#media-list2 {
        list-style: none;
        padding: 0;
        margin: 0
    }
</style>
<script>
    //上传投放类型图片js开始
    $(function () {
        var names = [];
        $('body').on('change', '.picupload', function (event) {
            var files = event.target.files;

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                names.push($(this).get(0).files[i].name);
                var picReader = new FileReader();
                picReader.fileName = file.name;
                picReader.addEventListener("load", function (event) {
                    var picFile = event.target;
                    var formData = new FormData();
                    formData.append("img", file);
                    formData.append("imglist", $('#imglist').val());

                    $.ajax({
                        url: '../admin/video/uploadImageP', //Server script to process data
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        beforeSend: function () {
                            mApp.block('body', {
                                overlayColor: '#000000',
                                type: 'loader',
                                state: 'success',
                                message: '图片处理中...'
                            });
                            return true;
                        },
                        //Ajax events
                        success: function (res) {
                            if (res.code == 1) {
                                var d = res.data;
                                var div = document.createElement("li");
                                div.innerHTML = "<img src='" + picFile.result + "'" +
                                    "title='" + picFile.name + "'/><div  class='post-thumb'><div class='inner-post-thumb'><a href='javascript:void(0);' data-id='" + d + "' class='remove-pic'><i class='fa fa-times' aria-hidden='true'></i></a><div></div>";

                                $("#media-list").prepend(div);
                                $('#imglist').val(res.img_str);
                                console.log(res.img_str);
                            }
                            //console.log(res);
                            mApp.unblock('body');
                        }
                    });
                });
                picReader.readAsDataURL(file);
            }
            // return array of file name
            console.log(names);
        });

        $('body').on('click', '.remove-pic', function () {
            $(this).parent().parent().parent().remove();
            var removeItem = $(this).attr('data-id');
            var removeid = $(this).attr('data-aid');
            var imglist = $("#imglist").val();
            var removekey = $("#removekey").val();
            console.log(removeItem);
            console.log("图片属性");
            $.ajax({
                url: '../admin/video/deleteImageP', //Server script to process data
                type: 'POST',
                data: 'imgkey=' + removeItem + '&imgid=' + removeid + '&imglist=' + imglist,
                beforeSend: function () {
                    mApp.block('body', {
                        overlayColor: '#000000',
                        type: 'loader',
                        state: 'success',
                        message: '加载中...'
                    });
                    return true;
                },
                //Ajax events
                success: function (res) {
                    mApp.unblock('body');
                    console.log("移除图片");
                    console.log(res);
                    if (res.code == 1) {
                        $('#imglist').val(res.data);
                    }
                }
            });
        });
    });
    //上传投放类型图片js结束
</script>

以上是js的代码

//上传视频方法
    //发布视频
    public function savevideo(Request $request)
    {

        $data = $request->param();
        $prekey =$data['prekey'];
        $files = [
            request()->file('video'),
        ];
     if(!$files) {
         return json(['code' => 2, 'msg' => "当前没有上传文件！"]);
     }
        if ($files[0]) {
            $upload_dir = Env::get("root_path") . 'public/uploads/' ; //创建文件夹
            if (!file_exists($upload_dir)) {
                mkdir($upload_dir, 0755, true);
            }
            $info = $files[0]->move($upload_dir);

            if ($info) {
                $video_src = $info->getSaveName();

                $video_name =config('upload_url').'/'.$video_src;
            } else {
                return $files[0]->getError();
            }
            $data['video'] = $video_name;
        }



        //获取签名
        //签名地址
        //上传
        $putvideo =  'https://api.saas.kissneck.com/saas-api/t-upload-video?secretid=AKID86IMEp7uEII86vqaLyX1OirshQvI7YWx&secretkey=LWSDrrj51qUmuxxnl3RioIbjZHtQnynU&videourl='.$video_name;
        $putvideofileid= curl_post($putvideo,$sss=[]);
        $Signatureinfo=json_decode($putvideofileid,true);

        //{"code":1,"fileId":"5285890793207470953","mediaUrl":"http:\/\/1258665410.vod2.myqcloud.com\/22ab8208vodcq1258665410\/da40c8b25285890793207470953\/f0.mp4","msg":"\u89c6\u9891\u4e0a\u4f20\u6210\u529f"}
        $fileId =$Signatureinfo['fileId'];
        //加密验证
        $encry =config('emailurlapi').'/t-encryption?secretid=AKID86IMEp7uEII86vqaLyX1OirshQvI7YWx&secretkey=LWSDrrj51qUmuxxnl3RioIbjZHtQnynU&saastoken=315bad7bfdba2545d8eb859873bdde60117e8d97&fileId='.$fileId;
        $encryvideoinfo= curl_post($encry,$sss=[]);
        $res =json_decode($encryvideoinfo,true)['codeDesc'];

        if($res == 'Success')
        {
            $product =Db::name('products')->find($prekey);
            $chapute =[
                'uid' => $product['uid'],
                'perkey' => $prekey,
                'oid' => 0,
                'product_status' => 3,
                'name' => $data['setnum'],
                'attr_content' => '',
                'createTime' => time()
            ];
            $getchaptid = DB::name('product_attr')->insertGetId($chapute);
            $info1 = [
                'uid' => $product['uid'],
                'perkey' => $prekey,
                'title' => $data['title'],
                'setnum' => $getchaptid,
                'videosrc' => $data['video'],
                'fee' => $data['fee'],
                'content' => $fileId,
                'product_status' => 2, //4  2 //草稿
                'createTime' => time()

            ];

            DB::name('video')->insertGetId($info1);
            return json(['code' => 1, "data" => $res, 'msg' => "上传成功！"]);
        } else {
            return json(['code' => 2, 'msg' => "上传失败！"]);
        }


    }

    public function savevideonext(Request $request)
    {

        $data = $request->param();
        $prekey =$data['prekey'];
        $files = [
            request()->file('video'),
        ];
//
        if ($files[0]) {
            $upload_dir = Env::get("root_path") . 'public/uploads/' ; //创建文件夹
            if (!file_exists($upload_dir)) {
                mkdir($upload_dir, 0755, true);
            }
            $info = $files[0]->move($upload_dir);

            if ($info) {
                $video_src =  $info->getSaveName();
                $video_name =config('upload_url').'/'.$video_src;
            } else {
                return $files[0]->getError();
            }
            $data['video'] = $video_name;
        }
        $putvideo =  'https://api.saas.kissneck.com/saas-api/t-upload-video?secretid=AKID86IMEp7uEII86vqaLyX1OirshQvI7YWx&secretkey=LWSDrrj51qUmuxxnl3RioIbjZHtQnynU&videourl='.$video_name;
        $putvideofileid= curl_post($putvideo,$sss=[]);
        $Signatureinfo=json_decode($putvideofileid,true);
        //{"code":1,"fileId":"5285890793207470953","mediaUrl":"http:\/\/1258665410.vod2.myqcloud.com\/22ab8208vodcq1258665410\/da40c8b25285890793207470953\/f0.mp4","msg":"\u89c6\u9891\u4e0a\u4f20\u6210\u529f"}
        $fileId =$Signatureinfo['fileId'];
        //加密验证
        $encry =config('emailurlapi').'/t-encryption?secretid=AKID86IMEp7uEII86vqaLyX1OirshQvI7YWx&secretkey=LWSDrrj51qUmuxxnl3RioIbjZHtQnynU&saastoken=315bad7bfdba2545d8eb859873bdde60117e8d97&fileId='.$fileId;
        $encryvideoinfo= curl_post($encry,$sss=[]);
        $res =json_decode($encryvideoinfo,true)['codeDesc'];
        if($res == 'Success') {

            $product =Db::name('products')->find($prekey);
            $chapute =[
                'uid' => $product['uid'],
                'perkey' => $prekey,
                'oid' => 0,
                'product_status' => 3,
                'name' => $data['setnum'],
                'attr_content' => '',
                'createTime' => time()
            ];
            $getchaptid = DB::name('product_attr')->insertGetId($chapute);
            $info1 = [
                'uid' => $product['uid'],
                'perkey' => $prekey,
                'title' => $data['title'],
                'setnum' => $getchaptid,
                'videosrc' => $data['video'],
                'fee' => $data['fee'],
                'content' => $fileId,
                'product_status' => 2, //4  2 //草稿
                'createTime' => time()

            ];
            $getvideoid=   DB::name('video')->insertGetId($info1);


            $data =['getvideoid'=>$getvideoid, 'getchaptid'=>$getchaptid,'setnum'=>$data['setnum'],'videosrc' => $data['video'], 'title' => $data['title'],];

            return json(['code' => 1, "data" => $data, 'msg' => "上传成功！"]);
        } else {
            return json(['code' => 2, 'msg' => "上传失败！"]);
        }
    }

    public function delvideonext(Request $request)
    {
        $data = $request->param();
        $chaptid =explode('&',$data['ids'])['0'];
        $videoid =explode('&',$data['ids'])['1'];
        $res='';
        if($chaptid)
        {
            DB::name('product_attr')->where('id',$chaptid)->delete();
        }
        if($videoid)
        {
          $res = DB::name('video')->where('id',$videoid)->delete();
        }

        if ($res) {
            return json(['code' => 1, "data" => $data, 'msg' => "删除成功！"]);
        } else {
            return json(['code' => 2, 'msg' => "删除失败！"]);
        }
    }
来日方长；
关注
专栏目录
TP5实现多文件上传
qq_38526952的博客
05-30 2216
最近要实现多图片上传,折腾了很久,总结一下基本的步骤。 首先前端 代码: <form id="addform" action="Upload_talent_tablec/hanleImgList/" method="post" enctype="multipart/form-data"> <p>请选择要导入的图片文件：<br/> ...
bootstrap文件上传的使用，带有进度条
xingxuexue的博客
09-07 4517
1.做了一天终于做出来了，在上传成功之后，可以将路径添加到数据库，因为一直在烦恼如何在上传成功之后在将路径添加到数据库，终于弄出来了，太开心了，不得不说bootstrap的强大，之前说ajax不能上传文件，之后想办法，用js写，更改了上传文件按钮的样式，但是没想到bootstrap真的太厉害了，样式还不错，可以预览，图片，限制文件的大小，格式等等，还有进度条。 后台的代码在之前写过了 这只有前台
TP自检进度条
04-26
TP自检进度条
Thinkphp + Layui 的大文件带进度条的上传
scientists112的博客
03-20 1174
提示：优美界面，直接能够用在生产当中的大文件上传代码 文章目录前言一、前端Layui 的上传模块实现1、html代码二、使用步骤1.引入库2.读入数据总结 前言 提示：网络时代的变化，网速的加快，对于大文件的上传下载都有了更高的需求。但是，发现没有一个比较好看，讲解清晰的thinkphp 大文件上传的教程。 一、前端Layui 的上传模块实现 示例：需要引入layui 1、html代码 在这里插入代码片 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
webuploader+tp5上传(文件版)
qq_26660583的博客
12-07 1009
最近项目中需要使用到上传超大文件的功能，网上看了几个插件，个人比较喜欢的有fcup.js、Web Uploader。最后决定使用百度的webuploader插件，原因有以下三点： 1.所有的样式都可以自己写，比较灵活 2.支持大文件切片上传 3.支持多文件批量上传 如果不需要批量上传的项目可以使用fcup.js，因为使用起来真的很简单。 这是Web Uploader的demo与文档地址。 效果图：...
tp5多图上传
09-23
TP5框架小白入门图片上传，主要的坑就是二维数组的处理，还有图片路径的处理
基于PHP的SIYUCMS基于ThinkPHP5.1+BootStrap开发的CMS内容管理系统源码.zip
最新发布
08-28
至于【压缩包子文件的文件名称列表】中的"132675167875231308"，这看起来像一个随机生成的数字序列，可能是为了保护源码的安全而命名的，通常在解压后会看到更详细的文件结构和名称，包括控制器、模型、视图、配置...
基于PHP的SIYUCMS 基于ThinkPHP5.1+BootStrap开发的CMS内容管理系统.zip
07-22
在SIYUCMS的实现中，BootStrap与ThinkPHP5.1的结合，实现了前后端的无缝对接。后端通过PHP处理数据，返回JSON或其他格式的数据，前端则利用BootStrap的模板和JS插件，将这些数据渲染成用户友好的界面。这样的分离式...
PHP实例开发源码—SIYUCMS 基于ThinkPHP5.1+BootStrap开发的CMS内容管理系统.zip
11-23
SIYUCMS是一款基于PHP语言，利用ThinkPHP5.1框架和BootStrap前端框架开发的CMS（内容管理系统）源码。这个系统旨在提供一个高效、灵活且易于维护的平台，用于构建和管理网站内容。下面我们将深入探讨该系统的几个...
基于ThinkPHP5.1和Bootstrap4.x开发的后台管理系统,集成会员管理，文章管理，产品管理，微信接入
07-23
php程序设计，web系统源码，源码，数据库MySQL，毕业设计项目，可用于课程设计作业等。
JQuery和PHP结合实现动态进度条上传显示
11-28
Windows 环境下的修改方法 第一步：修改在php5下POST文件大小的限制 1.编修php.ini 找到：max_execution_time = 30 ，这个是每个脚本运行的最长时间，单位秒，改为：max_execution_time = 150 找到：max_input_time = 60，这是每个脚本可以消耗的时间，单位也是秒，修改为： max_input_time = 300 找到：memory_limit = 128M，这个是脚本运行最大消耗的内存，根据你的需求更改数值，这里修改为：memory_limit = 256M 找到：post_max_size = 8M，表单提交最
TP5 基于Bootstrap 3可预览的HTML5文件上传插件
04-13
TP5 基于Bootstrap3 可预览的HTML5文件上传插件
基于ThinkPHP5.1+bootstrap4.x开发的后台管理系统,集成会员管理，文章管理，产品管理，微信接入，第三方登录等
08-26
《基于ThinkPHP5.1+Bootstrap4.x的后台管理系统详解》 在当今信息化时代，高效、易用的后台管理系统对于企业来说至关重要。本系统正是基于流行的ThinkPHP5.1框架和Bootstrap4.x前端UI库构建的，旨在提供一个集成了...
tp5实现阿里云oss的web直传及实时进度显示
fetch_all的博客
07-07 981
啥
php命令行进度条实现
qq_34701838的博客
11-18 666
/** * PHP命令行执行php文件的时候显示执行进度条 * 调用方法：cmd_progress_bar(100,2);表示进度为2%; * @param $total 总进度数量 * @param $current 当前进度数量 * @param string $begin_str 开始执行提示语 * @param string $finished_str 完成时候的提示语 * @param int $begin_num 从哪个进度开始，默认1 * @param int $screen.
php如何每隔5秒上传文件,thinkphp5使用webuploader切片进行大文件上传，1g大文件只需十几秒即可上传完成...
weixin_34662154的博客
03-13 248
资源引入html代码选择文件开始上传js代码,封装好的方法uploadfiles，直接使用uploadfiles(2655,'files')调用uploadfiles(2655,'files');//上传文件函数//ids唯一ID//folder文件保存目录function uploadfiles(ids,folder) {$(function(){var $list = $("#the_"+id...
layui + thinkphp 文件上传带进度条（我这里直接使用了上传进度的百分比，没有使用进度条）
zhangxy
12-03 2054
关于后台文件代码（使用框架 thinkphp6）： // 获取表单上传文件 $file = request()->file('file'); if(empty($file)){ return json(['info'=>'请选择上传文件！','status'=>0]); } // 移动到框架应用根目录/public/upload/ 目录下 $info = $file-&...
php实现上传文件时进度条提示文件上传多少
Galin的博客
01-19 8234
当文件过大，或者用户网络状态一般，通常上传过程需要一段时间，如果这时候让用户白屏等待的话，相信大部分用户都会直接关掉应用，所以一个监控上传进度，并实时向用户报告的需求就被产品汪摆在了桌面上。一个高逼格的上传进度提示，会让你的应用瞬间变成被仰望的存在。  PHP在5.4之前，总是需要安装额外的扩展才能监控到文件上传进度。而从5.4开始，引入session.upload_progress的新特性，我
tp5.1查询whereRaw 和 query使用
weixin_43023551的博客
10-21 5962
whereRwa $where = ''; $value = []; if ($senduid) { if ($senduid == '全部用户') { $u_id = 0; } else { $u_id = DB::name('Member')-&...
Spring MVC + Bootstrap 实现文件上传示例（带进度条）
在本篇教程中，我们将探讨如何使用Spring MVC框架与Bootstrap集成，实现在前端进行文件上传的同时提供进度条显示的功能。这在处理大文件上传时尤其实用，提升用户体验。以下是关键步骤和技术细节： 1. **监听器类：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值