bootstrap-fileinput 插件 初始化时 如何实现删除

最新推荐文章于 2025-07-11 14:45:08 发布
原创 最新推荐文章于 2025-07-11 14:45:08 发布 · 4.5k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bootstrap-fileinput #多文件删除

本文介绍了解决在使用bootstrap-fileinput.js插件时，初始化图片删除按钮不起作用的问题。通过正确配置initialPreviewConfig参数中的url，使得预览图中的删除按钮能够正常工作。

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

当我们从数据库中读出图片地址并通过bootstrap-fileinput.js插件进行展示时 往往会进行删除操作 但很多时候发现 初始化图片时 我们点击预览图中的删除按钮 没有反应  但我们从新上传后删除按钮又起作用了

这是由于我们没有配置初始化时的参数

只要配置好initialPreviewConfig里的url (删除服务器图片url)

我们在绑定时的filepredelete事件 就可以起效果了

 

最后附上 大神的文章

https://blog.youkuaiyun.com/jiang_mingyi/article/details/56290889

bootstrap File Input 多文件上传插件使用记录（二）删除原文件
Agger的博客
06-01 3万+
在上一篇文章中，主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等。这篇主要介绍file input插件的编辑等。 使用场景： 在后台管理框架中，一条数据中包含不固定的多张图片属性，然后需要同其他数据一起做增删改查。多文件同时新增上一篇已经做过了，需要的请点击打开链接，但是编辑的时候，就需要吧原来上传的图片展示出来，然后可以进行删除和重新上传，，这就是我现在要做的功
php+fileInput+bootstrap实现多文件上传预览删除功能
a187107的博客
02-06 819
【代码】php+fileInput+bootstrap实现多文件上传预览删除功能。
bootstrap-fileinput 插件 初始化时加载的图片无法点击删除按钮删除
u012432389的博客
03-22 1649
我们从数据库读取url 显示图片 点击图片上的删除按钮无法删除，而在有新的图片上传的时候又可以删除，最终发现在初始化的时候要从initialPreviewConfig加载删除的url，（url 可以随意设置 不一定要删除后台的图片但是一定要有） 可以根据设置的key 来进行隐藏字段的赋值操作。initialPreviewConfig 种每个图片都要对应一个url. 然后再绑定 filepredelete 和 filedeleted 才会成功 ...
Bootstrap FileInput文件上传组件实战指南
最新发布
weixin_33506815的博客
07-11 430
Bootstrap 是当今最流行的前端框架之一，它由 Twitter 的设计师和开发者共同创造。自 2011 年首次发布以来，Bootstrap 已经成为了响应式设计和移动优先理念的代名词。Bootstrap 诞生于2011年，是为了让Web开发更加快速和简化，随着版本的迭代，它逐步加入了更多现代前端特性。如今，Bootstrap 已经更新到5.x版本，并且为开发人员提供了丰富的组件、插件和工具，以构建复杂的交互式网页。Bootstrap 允许开发者通过修改SCSS变量来自定义主题。
解决bootstrap-fileinput无法删除initialPreview初始化预览的文件
胡朴桤的博客
04-16 8782
1.导语 最近在开发的时候遇见bootstrap-fileinput文件上传无法删除initialPreview预览文件的问题。因为很多情况下可能有一些默认的文件，但是需要删除，可是页面显示了删除按钮却无法删除文件，在网上查找了很多资料，没有看见解决方案，最后自己查看了源码后找到了问题所在。 2.思路 之所以显示了删除按钮却不能删除预览图的原因是因为没有给按钮绑定事件，所以我们只需要在插件初...
Bootstrap下fileinput 文件上传，删除，大概思路及fileinput参数配置
一只野生程序猿从入门到入土的学习之路
05-31 9274
$("#jdzjz .esf").fileinput({ language: 'zh', //设置语言    uploadUrl:"upload/jdzj", //上传controller映射的地址    deleteUrl: '#',//移除    <c:if test="${appraInfo.esf!=null}">    initialPreview: [           ...
Bootstrap fileinput 删除回调事件处理
热门推荐
老衲不洗頭的博客
11-08 2万+
bootstrap fileinput 控件删除事件的处理
bootstrap-fileinput-master（文件上传）
12-24
Bootstrap-fileinput 是一款基于Bootstrap框架的高级文件上传插件，它极大地丰富了文件上传的样式和功能，使得在Web应用中实现美观且易用的文件上传功能变得简单易行。这款组件不仅支持单个文件上传，还允许用户一次...
bootstrap-fileinput
05-24
Bootstrap-fileinput是一款...在使用Bootstrap-fileinput时，通常需要引入必要的CSS和JS文件，然后在HTML中添加一个`<input type="file">`元素，并对其进行初始化。例如： ```html <!-- 引入Bootstrap和jQuery --> ...
bootstrap-fileinput-4.3.2
04-29
例如，你可以这样初始化一个基本的Bootstrap FileInput： ```html <input type="file" id="file-input"> $(function () { $("#file-input").fileinput({ showUpload: false, // 不显示上传按钮 previewFileType...
Bootstrap中的fileinput 多图片上传及编辑功能
09-01
4. 调用fileinput插件初始化方法，传入预览元素和配置信息，完成组件的设置。 这个功能对前端开发者来说非常重要，因为它允许用户方便地管理他们的图片资源，同时也可以提供更好的用户体验。在实际应用中，还可以...
bootstrap-fileinput-master.zip
06-23
Bootstrap FileInput是一款强大的文件上传组件，它基于流行的前端框架Bootstrap构建，提供了丰富的功能和自定义选项，使得在网页上实现美观且功能齐全的文件上传变得简单。这个`bootstrap-fileinput-master.zip`...
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
01-21
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:’deletefile’,key:fileid } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。 在配置中遇到的一些问题，记录一下。 fileinput在文件上传成功后会触发’fileuploaded’事件，移除图片后会触发’filesuccessremove’事件。 其中在fileuploaded中参数previewId是形如：preview-1538964832345-2这样的一串字符，而在filesuccess
bootstrap fileinput 初始化图片 删除回调等
ddwddw4的博客
04-28 1万+
近期项目使用fileinput这个插件 主要是官方网站全部英文，个人能力有限，只能粗略解析，如有错误， 请提出！官方网址：http://plugins.krajee.com/file-input   建议大家可以去看看功能相关代码：[javascript] view plain copy$("#inputfile").fileinput({          language: 'zh', //设...
bootstrap-fileinput(二：编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )
xyhxuyonghao的博客
10-11 7237
bootstrap-fileinput(二：编辑(修改)界面文件的上传，回显，删除(数据库同时删除)的操作 )
bootstrap fileinput上传文件插件 删除文件方法
前端_小学生的博客
10-06 3670
bootstrap fileinput上传文件插件 删除文件方法 在fileinput的options中配置 $("#file-input").fileinput({ ajaxDeleteSettings: { type: 'POST', contentType: 'application/json;charset=utf-8...
Bootstrap fileinput 插件整合，完美实现各文件上传，删除。
何xiao树
07-31 5287
fileinput 这个插件，实用美观 ，总的来说就是好使，但是在配置整合上，一般都会耗时间。这里我专门花了两天时间做了个整理， 下载的官网最新版 V5.0 调试成功这里记录一波； 分享给大家，有爱自取，同时做个记录！ 基本支持所有类型的文件，不只图片，也可以扩展做导入，这里就不描述了。 上代码： <!DOCTYPE html> <html lang="en"> &lt...
如何清空file input框
qingqingzijinxin的专栏
01-13 2343
测试环境: OS --> winXP Browsers --> IE6+, FF 3.0.11, FF 3.5, Opera 9.64, Opera 10 beta 2, Safari 4, Chrome 2.0.172 xhtml: 清空文件域 JS: <script type="text/javas cript">      var btn = document.g
bootstrap-fileinput插件：多文件异步上传解决方案
最后，我们使用jQuery来初始化input元素为Bootstrap-fileinput插件。 4. Bootstrap-fileinput插件的配置方法： Bootstrap-fileinput插件提供了丰富的配置选项，用户可以通过设置这些选项来改变插件的行为和外观。...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值