@/*
|
头像参数的说明:
|
name : 名称
|
id : 头像的id
|
@*/
|
<div class="form-group" id="${id}_container">
|
<style type="text/css">.avatar-btn-hide { opacity: 0 } .video,video { width: 150px!important; height: 150px!important; border: 1px solid whitesmoke; }</style>
|
<label class="col-sm-3 control-label head-scu-label">
|
@if(isNotEmpty(required)){
|
<span style="color: red;">*</span>
|
@}
|
${name}</label>
|
<div class="col-sm-9">
|
<div class="col-sm-12">
|
<div class="col-sm-4">
|
<div id="${id}PreId" class="video" align="center" style="line-height: 150px; text-align: center">
|
<video controls></video>
|
<span class="video">暂无视频</span>
|
</div>
|
</div>
|
<div class="col-sm-2">
|
<div class="head-scu-btn upload-btn" id="${id}BtnId">
|
<i class="fa fa-upload"></i> <span>上传</span>
|
</div>
|
</div>
|
@if( isNotEmpty( placeholder)) {
|
<div class="col-sm-6" style="color: red; ">
|
<div class="head-scu-btn">${placeholder!}</div>
|
</div>
|
@}
|
</div>
|
<div class="col-sm-12">
|
<div class="progress progress-striped" style="margin-top: 20px;">
|
<div id="${id}progressBar" style="width: 0%" aria-valuemax="100"
|
aria-valuemin="0" aria-valuenow="0" role="progressbar"
|
class="progress-bar progress-bar-info"></div>
|
</div>
|
<input style="opacity:0" id="${id}" value="${value!}" name="${id}"/>
|
</div>
|
<script>$(function () {
|
// 初始化图片上传
|
var imageUp = new $WebUploadImage("${id}");
|
imageUp.create = function () {
|
var webUploader = WebUploader.create({
|
auto : true,
|
pick : {
|
id : '#' + this.uploadBtnId,
|
multiple : false,// 只上传一个
|
},
|
accept : {
|
title : 'Video',
|
extensions : 'mp4,avi',
|
mimeTypes : 'video/mp4,video/MP4,video/AVI,video/avi'
|
},
|
swf : Feng.ctxPath
|
+ '/static/js/plugins/webuploader/Uploader.swf',
|
disableGlobalDnd : true,
|
duplicate : true,
|
server : this.uploadUrl,
|
fileSingleSizeLimit : this.fileSizeLimit
|
});
|
return webUploader;
|
}
|
imageUp.setUploadBarId("${id}progressBar");
|
var bindedObj = imageUp.init();
|
bindedObj.off("fileQueued").on('uploadSuccess', function(file,response) {
|
Feng.success("上传成功");
|
$( "video").show();
|
$("span.video").hide();
|
$("#" + imageUp.pictureId).val(response);
|
if(response.indexOf("http") == -1) { response = Feng.ctxPath + '/kaptcha/' + response; }
|
$( "#${id}PreId").find( "video").remove();
|
$( "#${id}PreId").append( $( "<video controls>").append('<source src="'+ response +'" type="video/mp4">'));
|
});
|
|
|
if ( "${value!}") {
|
$("span.video").hide();
|
$("#${id}PreId").find("video").append('<source src="${value!}" type="video/mp4">');
|
$("#${id}BtnId").find( "span").text("更改");
|
} else {
|
$( "video").hide();
|
$("span.video").show();
|
}
|
|
$("#${id}").on( "valueChange", function (){
|
$("#${id}BtnId").find( "span").text("更改");
|
});
|
|
})</script>
|
</div>
|
</div>
|
@if(isNotEmpty(underline) && underline == 'true'){
|
<div class="hr-line-dashed"></div>
|
@}
|