关于bootstrap-fileinput上传后删除预览效果

 最近做处理文件上传时使用到了bootstrap-fileinput,一开始按照官网的example写,文件上传时成功的,但是每次上传之后,再一次打开,上一次上传的文件预览还在,虽然没什么影响,但是就是浑身难受。

 所以我百度了一些资料,也试了很多方法,但是效果都不怎么好,直到我看到一篇简书上的博文我的问题才得以解决。

bootstrap-fileinput 进阶 -- 实现上传失败清除之前的预览图且可以继续上传

		
		$("#imgUpload").fileinput({
		    language: 'zh',
		    uploadUrl: "/mer/posmer/maintenance/addImg",
		    autoReplace: true,
		    maxFileCount: 1,
		    allowedFileExtensions: ["jpg", "png", "gif"],
		    browseClass: "btn btn-primary", //按钮样式 
		    enctype: 'multipart/form-data',
		    previewFileIcon: "",
		    uploadExtraData: function(previewId, index) {   //额外参数
	                var obj = {};
	                obj.addImg_merId = $("#addImg_merId").val(); 
	                obj.addImg_type = $("#addImg_type").val();
	                obj.addImg_salesmanId = $("#addImg_salesmanId").val();
	                obj.addImg_declarationDate = $("#addImg_declarationDate").val();
	                obj.addImg_machineDate = $("#addImg_machineDate").val();
	                return obj;
	            }, layoutTemplates :{ 
	        	// actionDelete:'', //去除上传预览的缩略图中的删除图标
	                actionUpload:'',//去除上传预览缩略图中的上传图片;
	                actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
	            }
	        }).on("fileuploaded", function (e, data) {
		    var res = data.response;
		    if (res.state > 0) {
				layer.msg('上传成功');
		        table.ajax.reload();
				$('#addImg').modal('hide');
		    } else {
				layer.msg('上传失败');
		        table.ajax.reload();
		    }   

	            $(e.target).fileinput('clear').fileinput('unlock') 
                    $(e.target).parent().siblings('.fileinput-remove').hide()
		});  

 

你可能感兴趣的:(个人笔记)