Bootstrap FileInput如何进行编辑,重新上传

前台:

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);
});
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值