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

最新推荐文章于 2025-05-28 10:21:49 发布

ChEnSv

最新推荐文章于 2025-05-28 10:21:49 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：个人笔记

本文链接：https://blog.youkuaiyun.com/weixin_41800431/article/details/86521219

本文介绍了在使用bootstrap-fileinput进行文件上传时遇到的问题，即上传后的文件预览在再次打开时仍然存在。作者通过搜索资料和尝试，最终在一篇简书博文中找到了解决方法，实现了上传失败清除预览图并允许继续上传的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做处理文件上传时使用到了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: "<i class='glyphicon glyphicon-king'></i>",
		    uploadExtraData: function(previewId, index) {   //额外参数
	                var obj = {};
	                obj.addImg_merId = $("#addImg_merId").val(); 
	                obj.addImg_type = $