项目有一个上传文件需要用到上传进度条
网上找了很多 但是都效果甚微
可以多传文件
{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--separator">帖子管理</h5>-->
<!--<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">-->
<!--<li class="m-nav__item m-nav__item--home">-->
<!--<a href="{:url('/a/index')}" class="m-nav__link m-nav__link--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--custom m-btn--pill m-btn--icon m-btn--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">--请选择--</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--font-danger m--block-inline"> 建议图标尺寸:320:180PX 图片格式:png,jpg,gif,jpeg-->
<!--图片限制:2M以内 --将来根据具体需求进行调整</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--gradient-from-info m-btn--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--font-danger m--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--gradient-from-info m-btn--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--font-danger m--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--gradient-from-info m-btn--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' => "删除失败!"]);
}
}