bootstrap-fileinput组件在完成上传后清空输入框的方法

最新推荐文章于 2024-07-24 17:39:56 发布
最新推荐文章于 2024-07-24 17:39:56 发布
阅读量8.9k 收藏 3
点赞数
分类专栏： web开发 文章标签： bootstrap fileinput fileinput clean
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fireofjava/article/details/87186103
版权

使用bootstrap-fileinput上传组件，在上传文件后，发现没有提供方法可以清空文件选择框，form reset也不行，在网上查了半天也没有找到相关的资料，想到一个变通的方法，就是模拟点击文件选择框的移除按钮，该按钮在选择文件后会出现，并且带有样式fileinput-remove-button，所以可以在表单提交后调用$(".fileinput-remove-button").click();来清空文件选择框。

快乐小左
关注
专栏目录
Bootstarp-fileInput插件使用手册
xing_jin_peng的博客
07-20 497
属性：函数介绍：
将input file的选择的文件清空的两种解决方案
09-04
上传文件时,选择了文件后想清空文件路径，经搜索发现个不错的方法在此与大家分享下，感兴趣的朋友不要错过
Bootstrap FileInput中文API整理
09-04
Bootstrap FileInput中文API整理，Bootstrap FileInput中文API整理，Bootstrap FileInput中文API整理，Bootstrap FileInput中文API整理，Bootstrap FileInput中文API整理
input 上传文件后清除
最新发布
Aa12364567的博客
07-24 422
把input放到form中，清空form。达到实现清空input的效果
bootstrap上传之后的处理_Bootstrap Fileinput文件上传组件用法详解
weixin_39996739的博客
12-18 375
最近时间空余，总结了一些关于bootstrap fileinput组件的一些常见用法，特此分享到脚本之家平台，供大家参考，同时也方便以后的查找。本文写的不好还请见谅。一、效果展示1、原始的input type='file'，简直不忍直视。2、不做任何装饰的bootstrap fileinput：(bootstrap fileinput初级进化)3、bootstrap fileinput高级进化：中...
bootstrap-fileinput 完成上传或上传错误后清空输入框的方法
liuenwen的专栏
01-05 2094
不多BB，直接上结果！ 上传成功：.on("fileuploaded", function (event, data, previewId, index) { var obj = data.response; $(".fileinput-remove-button").click(); //模拟移除按钮单击事件 }) 上传失败：.on('fileuploaderror', function (event, data, msg) { ...
bootstrap-fileinput 上传失败后默认清除当前已选文件
_修铁路的、的博客
08-02 2479
bootstrap-fileinput 上传失败后默认清除当前已选文件，并可以再次正常上传 $("#myfile").fileinput({ language: 'zh', uploadUrl: u.formatApiUrl(importUrl), //文件上传地址 maxFileCount: 1, //上传数量限制 allowedFileExtensions: ["zip"], browseClass: "btn .
bootstrap-fileinput-master插件js、css
04-15
这个"bootstrap-fileinput-master"压缩包包含的是该插件的源代码及其相关资源，比如JavaScript文件和CSS样式表，使得开发者能够方便地在自己的项目中集成和自定义这个组件。 在Bootstrap-fileinput中，主要知识点有...
bootstrap中input框清除按钮
07-11
bootstrap input 框 清除 小插件、很简单的一个小的js，引入即可。省时省力。
bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件
weixin_39793420的博客
12-19 919
这次开发了个小TRS系统，虽然是很小，但是作为初心者，第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件。包括bootstrap-select2，bootstrap-datetimepicker，bootstrap-fileinput等。本文就旨在记录一些这些组件相关的内容【bootstrap-select2】官方文档：【https://select2...
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
10-17
主要介绍了Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置 ,需要的朋友可以参考下
Bootstrap FileInput 选择文件后出的清空 重置按钮
qq_38905668的博客
11-02 1467
因为我是点击上传后数据是临时放在后端的 我想点击清空后台数据久要获取到清空按钮这个元素但是他是动态生成的所有我在网上找了很多说明都没有找到后来我只能手动自己去修改了 fileinput.js 写个记录防止自己后面又用到同时给大家借鉴 '<scripttype="text/javascript"> $("#removel").click(function(){$.ajax({type:"post",url:urll+"/LeavingMessage/mapinfo",dataT...
bootstrap-fileinput上传完文件后，输入框还原
lovesman的博客
09-11 800
$("#upload").on("fileuploaded", function (event, data, previewId, index) { debugger debugger; $('#upload').fileinput('cancel'); $('#upload').fileinput('clear'); $('#upload').fileinput('enable'); $('#upload').fileinput('can
React清空input上传
Lynn
05-11 1333
在上述代码中，我们首先使用 useRef 创建了一个 fileInputRef 引用，然后将其传递给 元素的 ref。在处理文件上传操作完成后，我们手动将 fileInputRef.current.value。元素的值，可以使用 ref 来获取 DOM 元素，并手动设置其值为 null 或 “”因此，我们只能通过 ref 来获取其值并进行修改。属性设置为一个空字符串，从而清空文件上传表单元素的值。注意，由于安全限制，浏览器不允许直接修改。在 React 中清空。
input file选择文件上传后清空选择框文件信息两种解决方案
Anhk丶
03-23 1649
input file选择文件上传后清空选择框文件信息两种解决方案 上传文件时,选择了文件后想清空文件路径。用两种方法解决 <input type="file" id="fileupload" name="file"/> 第一种: var obj = document.getElementById('fileupload') ; obj.select(); document.sele...
Bootstrap fileinput 删除回调事件处理
热门推荐
老衲不洗頭的博客
11-08 2万+
bootstrap fileinput 控件删除事件的处理
IE下使用bootstrap-fileinput清空文件框并设置可用时文件框格式错误
记录
08-21 3904
在项目中使用的是bootstrap-fileinput，如下图： 下方是选择文件并上传，上方放文件的展示。上传之后要清空下方的文件框并设置可用，代码如下： //清空上传文件框并设置可用 $("#file-case").fileinput('refresh').fileinput('enable'); 用这种方法在chrome中可用，展示也是正常的，截图如下：
bootstrap fileinput 初始化图片 删除回调等
ddwddw4的博客
04-28 1万+
近期项目使用fileinput这个插件 主要是官方网站全部英文，个人能力有限，只能粗略解析，如有错误， 请提出！官方网址：http://plugins.krajee.com/file-input   建议大家可以去看看功能相关代码：[javascript] view plain copy$("#inputfile").fileinput({          language: 'zh', //设...
bootstrap-fileinput()分片上传
07-25
对于使用bootstrap-fileinput插件进行分片上传，你需要确保使用的是5.0版本或更高版本的插件，因为分片上传功能是在5.0版本中新增的。分片上传适用于需要上传大文件但又无法放开包大小限制的情况。你可以通过开启分片上传来实现这一功能。\[1\] 另外，需要注意的是，虽然bootstrap-fileinput插件可以用于已经上传到服务器端的文件的回显，但并不是对回显操作的最佳解决方案。对于回显操作，最好不要使用bootstrap-fileinput插件。然而，作为bootstrap-fileinput插件的基本功能之一，你可以在示例中通过该插件实现文件的回显，包括图片文件。\[2\] 如果你想使用bootstrap-fileinput插件，你需要在页面中引入相应的脚本文件，例如： <script type="text/javascript" src="~/bootstrap-fileinput/themes/fas/theme.js"></script> 这样可以确保插件的功能正常运行。\[3\] #### 引用[.reference_title] - *1* [bootstrap-fileinput分片上传](https://blog.csdn.net/puss0/article/details/124080911)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [第51章 Bootstrap-Fileinput深入理解](https://blog.csdn.net/zhoujian_911/article/details/125425153)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值