HTML代码
<div class="layui-form-item layui-col-md6 layui-col-md-offset3">
<label class="layui-form-label">图库图片:</label>
<button type="button" id="uploadTop" class="layui-btn layui-btn-primary">
<i class="layui-icon"></i>上传
</button>
<div style="display: inline-block;top:50%;left: 120px;">只能上传jpg/png格式文件,文件不能超过1MB,请上传16:9图</div>
<div class="layui-upload-list uploader-list" style="" id="topImage"></div>
<input type="hidden" id="stockImages" name="stockImages"/>
</div>
JS代码
/**
* 添加顶部图片的框框
*/
$("#uploadTop").on('click',function(){
if(topIds>19){
layer.msg("最多上传20张图", {
icon: 5
});
}else{
$('#topImage').append('<div style="display: inline-block;margin-left: 10px;"><div id="topValue" style="margin:0 auto;width: 100px;height: 100px;border:1px solid #c0b5a8;"><img id="top'+topIds+'" height="100px" width="100px" class="layui-upload-img">' + '<input type="hidden" name="imgPath" id="topInput'+topIds+'" value=""/></div><i id="uploadTop'+topIds+'" class="layui-icon" style="margin: 0 0">上传</i><i class="topImage close layui-icon" style="margin: 0 20px"></i></div>');
$(".topImage").on('click',function(){
$(this).parent().remove();
});
var uploadId = "#uploadTop"+topIds;
var imgId = "top"+topIds;
var inputId = "#topInput"+topIds;
setImg(uploadId,imgId,inputId);topIds++;
}
});
/**
* 上传顶部图片或者详情图片
* @type {Array}
*/
var files=[];
function setImg(uploadId,imgId,inputId){
upload.render({
elem:uploadId,
url: window.ptfConfig.baseUrl + path.uploadPic,
headers: { //通过 request 头传递
Authorization: layui.data(setter.tableName)[setter.headers.accessTokenName]
},
size: 1024, //限制文件大小,单位 KB
choose: function (obj) {
files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//files = obj.pushFile();
},
done: function (res, index, upload) {
var filePath = res.data[0].url;//"http://192.168.1.66:8093/testReport/uploadPic/ 2019629/156179174723094yar9z9.jpg"
$(inputId).val(filePath);
//var str = "div[id="+inputId+"] input";
// var v = filePath;
//$(str).val(v);
//获取img对象
var img = document.getElementById(imgId);
//建一条文件流来读取图片
var reader = new FileReader();
//根据url将文件添加的流中
reader.readAsDataURL(files[index]);
//实现onload接口
reader.onload = function (e) {
//获取文件在流中url
var url = reader.result;
//将url赋值给img的src属性
img.src = url;
};
delete this.files[index];
},
/*error: function (msg) {
layer.msg(msg, {
icon: 5
});
}*/
});
}
编辑时回显图片
/*编辑时回显图片*/
if(panoramaEntity.stockImages!=null){
bannerImgList = panoramaEntity.stockImages.split(",");
if (bannerImgList != null && bannerImgList != "") {
for (var i = 0; i < bannerImgList.length; i++) {
var srcValue = window.ptfConfig.baseUrl + "/readImage?url=" + bannerImgList[i] + "&access_token=" + access_token;
$('#topImage').append('<div style="display: inline-block;margin-left: 10px;"><div id="topValue" style="margin:0 auto;width: 100px;height: 100px;border:1px solid #c0b5a8;"><img id="top'+topIds+'" src="' + srcValue + '" height="100px" width="100px" class="layui-upload-img">' + '<input type="hidden" name="imgPath" id="topInput'+topIds+'" value="'+ bannerImgList[i] +'"/></div><i class="topImage close layui-icon" style="margin: 0 43px"></i></div>');
topIds++;
$(".topImage").on('click',function(){
$(this).parent().remove();
});
}
}
}
效果图如下