前台:
if(data.s_pic != "")
{
var pics = data.s_pic.split(',');
var preList = new Array();
var previewJson = preList; //填充
var initPreviewConfig = new Array(); //填充
for(var i = 0; i < pics.length; i++){ //这里遍历图片列表
console.log(pics[i]);
if(pics[i] != "" && pics[i] != " "){
preList[i]= '<img src="'+pics[i]+'" class="file-preview-image" style="width: 100px; height: 100px;">'; //组装图片
//组装图片配置
var id = data.s_id;
var parmaJson={
id:id,
picurl:pics[i]
};
var tjson = {
caption: (i+1)+'.png', // 展示的文件名
width: '120px',
url: 'XXX', // 删除url
key: pics[i], // 删除是Ajax向后台传递的参数
extra: function() {
return {"id":id};
}
}
initPreviewConfig[i] = tjson;
}
}
initFileInput(data.s_pic+ ",",previewJson,initPreviewConfig);
}else
{
initFileInput(data.s_pic+ ",","","");
}
function initFileInput(datapicurl,previewJson,initPreviewConfig)
{
var picurl = datapicurl;
if(picurl == ",")
{
picurl = "";
}
$("#file-1").fileinput({
uploadUrl: 'XXX', // 必须设置个路径进入php代码部分
allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//允许的文件类型
overwriteInitial: false,
language: 'zh',
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",// 按钮样式
maxFileSize: 1500,//文件的最大大小 单位是k
uploadExtraData: { //上传的时候,增加的附加参数
userid: getCookie('userid_'), encrypt: getCookie('encrypt_')
},
previewSettings: {
image: {width: "100px", height: "100px"},
},
initialPreview:previewJson, //初始化图片
initialPreviewConfig:initPreviewConfig, //初始化图片配置
maxFilesNum: 5,//最多文件数量
previewSettings: {
image: {width: "100px", height: "100px"},
},
slugCallback: function(filename) {
return filename;
}
}).on('filecleared',function(){
picurl = "";
$("#s_pic").val(picurl);
}).on('filepredelete', function(event, key, jqXHR, data) {
console.log(picurl);
var arrPic = picurl.split(',');
arrPic.remove(key);
console.log(arrPic.join(','));
picurl = arrPic.join(',');
if(picurl == ",")
{
picurl = "";
}
$("#s_pic").val(picurl);
})
.on('fileuploaded', function (event, data, previewId, index) {
console.log(event,data,previewId,index);
picurl +=data.response.info + ",";
$("#s_pic").val(picurl);
});
}