重置 bootstrap-fileinput

最近在使用 bootstrap-fileinput 插件时,碰到了这样的问题:

场景:

我在表单中使用了bootstrap-fileinput 插件,且已经上传了文件,显示出了文件上传之后的预览框。

当我点击reset 按钮时,调用一个resetFrom()方法, 方法里调用了插件的 clear方法:

1 $scope.resetForm = function(){
2
3   ...
4
5   angular.element(‘#file-input‘).fileinput(‘clear‘)
6   ...
7
8 }

发现无法将上传的文件预览视图去除,这时我到官网查阅了Api,官网上是这样写的:

Clear :

Clear the file input. This method clears the preview of all non-uploaded files, clears the ajax filestack, and also clears the native file input. This method thus provides a more deeper cleaning of the fileinput as compared to the reset method. This method is automatically called when the main Remove button beside the file Browse button is clicked OR the enveloping native form RESET action is triggered (e.g. via a form RESET button)......

大概意思就是只清除 “非” 上传文件的文件预览,且改方法在你点击文件预览的清除图标时会调用。已经发现问题所在了,由于我上面描述的场景中,文件是已经上传了的,所以调用该方法得不到我想要的效果。

类似的方法还有 reset 方法,但是他是比 clear 更温和的方法,无法直接清除本地文件,所以更加不能达到我要的效果。

解决方法:

遂查看其源码,加断点,慢慢debug,最终功夫不负有心人,找到了_clearPreview 里的_resetUpload 方法,搞定:

angular.element(‘#file-input‘).fileinput(‘clear‘)
时间: 2024-10-13 16:17:43

重置 bootstrap-fileinput的相关文章

Bootstrap FileInput 上传 中文 API 整理

Bootstrap FileInput 上传  中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看  会用就行 自己都不知道每个值是干嘛用的就问大佬 总结一下 1 一. 引入文件 2 <link href="../css/bootstrap.min.css"rel="stylesheet"> 3 <link href="../css/fileinput.css" media

Bootstrap fileinput v1.0(ssm版)

前言bootstrap fileinput是一个很好的文件上传插件.但是官方不出api,这就尴尬了.百度一下,每个人写法都不相同,好多代码本身都是错的.我修改后才能跑起来.综上所述:所以今天我摸索了一天,把今天能够跑的起来的程序核心代码贴上.完整demo在文章末尾github地址上基于本人习惯:所用前端控件均为2017年最新的.最后再唠叨一句:bootstrap不支持IE8极其以下的.没必要与IE较真,毕竟微软人家自己的win10都抛弃ie了.我们又何苦抓着不放呢 功能说明这个版本的功能比较单一

Bootstrap fileinput v3.0(ssm版)

说明在上一个版本即Bootstrap fileinput v2.0(ssm版)的基础上,增加了多处都需要上传的需求 核心代码ArticleController.java package com.isd.controller; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.List; import java

bootstrap fileinput 上传文件

最近用到文件上传功能, 说实话:以前遇到过一次,COPY了别人的代码 结束! 这次又要用,可是看到别人很酷的文件上传功能,心痒了! 好吧.简单的办法,找控件: bootstrap fileinput 真是好看: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fi

JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

原文:JS组件系列--Bootstrap文件上传组件:bootstrap fileinput 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:

bootstrap fileinput api翻译笔记

bootstrap fileinput HTML标签属性 data-show-preview="false" // 是否显示预览区 multiple // 多文件 data-show-caption="true" // 显示输入框 readonly="true" disabled="true" data-show-remove="false" // remove按钮 class="file-loa

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用,整合两者可以实现我们常规的Web数据导入操作,导入数据操作过程包括有上传文件,预览数据,选择并提交记录等一系列操作. 关于这个插件,我在早期随笔<Bootstrap文件上传插件File Input的使用>也做了一次介绍,这是一个增强的 HTML5 文件输入控件,是一个 Bootstrap 3.x

bootstrap fileinput添加上传成功回调事件

国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑定事件绑定fileuploaded为什么没有获取到response的数据, 我看到这个马上眼前一亮,赶紧试一试,自己测试发现果然可以耶!返回的response数据也很全呢,那位兄弟为什么就不可以?不管怎样,还是谢谢他的建议. 很简单一条语句经验可以解决这样的难题,jquery真是牛逼: $("#fi

***Bootstrap FileInput插件的使用经验汇总

插件下载地址: https://github.com/kartik-v/bootstrap-fileinput/ 官方DEMO查看: http://plugins.krajee.com/file-basic-usage-demo JQ上传插件汇总:http://www.jq22.com/jquery-plugins%E4%B8%8A%E4%BC%A0-1-jq 图片预览上传插件bootstrap-fileinput.js http://www.jq22.com/jquery-info15397

JS文件上传神器bootstrap fileinput详解

Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过