@/*
|
头像参数的说明:
|
name : 名称
|
id : 头像的id
|
imgClass : 每行放几个照片 默认: col-sm-12
|
len : 允许上传照片数量 默认1
|
@*/
|
<div class="form-group">
|
<style>
|
.image-remove-container {
|
width: calc(100% - 30px);
|
background-color: rgba(0, 0, 0, 0.4);
|
position: absolute;
|
top: 0;
|
text-align: center;
|
color: red;
|
}
|
.image-remove-container i,.image-remove-container span {
|
cursor: pointer!important;
|
font-size: 2em;
|
right: 0;
|
}
|
</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 form-control-static" id="${id}BtnContainer">
|
@if( isNotEmpty( placeholder)) {
|
<div class="col-sm-12" style="color: red; ">
|
${placeholder!}
|
</div>
|
@}
|
</div>
|
<div class="col-sm-9 col-sm-offset-3">
|
<div class="row" id="${id}Img" style="min-height: 80px;"></div>
|
<input type="text" style="opacity:0; height: 0px" id="${id}" name="${id}" value="${value!}">
|
<script>
|
$(function () {
|
var init_$el_img = function ( $elem, maxLen, col_class) {
|
var def_src_url = Feng.ctxPath + "/static/img/NoPIC.png";
|
var $img_elem_fun = function( name, url) {
|
return '' +
|
'<div class="col-sm-12">' +
|
' <div class="no-padding" style="width: 100%; height: 100px;">' +
|
' <img style="cursor:pointer;" src="' + ( url ? url : def_src_url) + '" width="100%" height="100px"/>' +
|
' </div>' +
|
' <div class="progress progress-striped" style="margin-top: 20px;">' +
|
' <div name="progress" style="width: 0%" aria-valuemax="100" aria-valuemin="0" ' +
|
' aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-info"></div>' +
|
' </div>' +
|
'</div>';
|
};
|
return {
|
$_el: function ( name) { return $("<div id='" + name + "_img_content' class='" + (col_class || "col-sm-12") + "'></div>"); },
|
upImgUrls: [],
|
$images: {},
|
uId: "image_" + ((Math.random() * 10000).toFixed(0)),
|
add_set_change_: function ( $input) {
|
this.$input = $input;
|
return this;
|
},
|
init: function ( imgList) {
|
var self = this;
|
self.upImgUrls = Array.isArray( imgList) ? imgList : (imgList ? imgList.split( ","):[]);
|
if ( self.upImgUrls.length < maxLen) {
|
self.init_web_upload_img( self.uId);
|
}
|
// 如果 初始化的图片 没有达到最大值 那就默认一张可继续上传的图片
|
self.upImgUrls.forEach(function ( src) {
|
var $img = self.$_el(); $img.html( $img_elem_fun( "img_" + (Math.random() * 10000).toFixed(0), ""));
|
$elem.append( $img);
|
self.add_remove_( $img);
|
$img.find('img').attr('src', src);
|
});
|
},
|
get_file_name: function( file) {
|
if ( file) {
|
if ( !file.uId) {
|
file.uId = (Math.random() * 1000000).toFixed( 0);
|
}
|
return file.uId;
|
} return "";
|
},
|
init_web_upload_img: function( uId) {
|
var self = this, $btnContainer = $("#${id}BtnContainer");
|
// 如果已存在 那就干掉
|
if ( $btnContainer.find( "#" + self.uId + "BtnId").length > 0) {
|
$btnContainer.find( "#" + self.uId + "BtnId").remove();
|
self.$imgUpload && self.$imgUpload.destroy();
|
|
// 重新赋值
|
self.$input && self.$input.val( self.upImgUrls.join(","));
|
}
|
$btnContainer.prepend('' +
|
'<div class="upload-btn" style="margin: 0 0 1em 1em;margin-top: 0px!important;" id="'+ self.uId +'BtnId">' +
|
' <i class="fa fa-upload"></i> 上传' +
|
'</div>');
|
self.$imgUpload = new $WebUploadImage( uId).create( maxLen != 1, maxLen - this.upImgUrls.length);
|
self.$imgUpload.on( "fileQueued", function ( file) {
|
var $img = self.$_el( self.get_file_name( file)); $img.html( $img_elem_fun( self.get_file_name( file), ""));
|
$elem.append( $img);
|
// 生成缩略图
|
self.$imgUpload.makeThumb(file, function(error, src) {
|
if (error) {
|
$img.replaceWith('<span>不能预览</span>');
|
return;
|
}
|
$img.find('img').attr('src', src);
|
}, 100, 100);
|
})
|
// 文件上传过程中创建进度条实时显示。
|
self.$imgUpload.on('uploadProgress', function(file, percentage) {
|
$( "#" + self.get_file_name( file) + "_img_content").find("*[name=progress]").css( "width", percentage * 100 + '%');
|
});
|
|
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
|
self.$imgUpload.on('uploadSuccess', function(file,response) {
|
var $content = $( "#" + self.get_file_name( file) + "_img_content");
|
$content.find("img").attr( "src", response);
|
self.add_remove_( $content);
|
self.upImgUrls.push( response);
|
self.$input && self.$input.val( self.upImgUrls.join(","));
|
});
|
// 其他错误
|
self.$imgUpload.on('error', function(type) {
|
if ("Q_EXCEED_SIZE_LIMIT" == type) {
|
Feng.error("文件大小超出了限制");
|
} else if ("Q_TYPE_DENIED" == type) {
|
Feng.error("文件类型不满足");
|
} else if ("Q_EXCEED_NUM_LIMIT" == type) {
|
Feng.error("上传数量超过限制");
|
} else if ("F_DUPLICATE" == type) {
|
Feng.error("图片选择重复");
|
} else {
|
Feng.error("上传过程中出错");
|
}
|
});
|
},
|
// 删除图标
|
add_remove_: function ( $elem) {
|
var self = this;
|
var $remove_i = $( '<div class="image-remove-container"><i class="fa fa-trash-o"></i></div>');
|
$elem.find( "img").after( $remove_i);
|
$remove_i.find(".fa").on( "click", function () {
|
$elem.remove();
|
var src = $elem.find( 'img').attr( "src");
|
self.upImgUrls = self.upImgUrls.filter(function ( img) { return img != src });
|
self.init_web_upload_img( self.uId);
|
});
|
},
|
getImgUrls: function () {
|
return (this.upImgUrls||[]).join( ",");
|
}
|
}
|
}
|
|
var cls = "${imgClass!}"||"col-sm-12", len = "${len!}"||1;
|
var ${id}Img = init_$el_img( $("#${id}Img"), len, cls);
|
${id}Img.add_set_change_($("#${id}")).init( "${value!}");
|
});
|
</script>
|
</div>
|
</div>
|
@if(isNotEmpty(underline) && underline == 'true'){
|
<div class="hr-line-dashed"></div>
|
@}
|
