Bootstrap 文件上传插件 FileInput的使用问题
:
在使用bootstrap的文件上传插件fileinput http://plugins.krajee.com/file-input的预览功能时,删除预览图片在 bootstrap 模态框中没有用,需要先点击移除,在点删除才有用
问题对比:
1.在正常页面中可以使用
<input type="file" id="test" class="form-control inline-form-control"/>
$(document).ready(function () {
var url1 = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg'; $("#test").fileinput({
initialPreview: [url1],
initialPreviewAsData: true,
initialPreviewConfig: [
{caption: "Moon.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1}
],
deleteUrl: "/watch/video/deleteimage",
overwriteInitial: false,
maxFileSize: 100,
initialCaption: "The Moon and the Earth"
});
$("#test2").fileinput({
initialPreview: [url1],
initialPreviewAsData: true,
initialPreviewConfig: [
{caption: "Moon.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1}
],
deleteUrl: "/watch/video/deleteimage",
overwriteInitial: false,
maxFileSize: 100,
initialCaption: "The Moon and the Earth"
});
});
点击删除,看到了删除请求
2.同样的代码,将 input 放到modal中
modal代码
<div class="modal fade" id="editVideo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">修改视频评测</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="min-height: 260px;">
<div class="row" style="height: auto"> <input type="file" class="form-control" name="editfile" id="test2"> </div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="submit" class="btn btn-primary edit-confirm">确定</button>
</div>
</div>
</div>
</div>
js在上文已给出
Bootstrap 文件上传插件 FileInput的使用问题的更多相关文章
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)
首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...
- Bootstrap -- 文件上传插件File Input的使用
BootstrapFileInput下载参考:http://www.jq22.com/jquery-info5231 网友经验参见:http://www.cnblogs.com/wuhuacong/p ...
- JS组件系列——Bootstrap文件上传组件:bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- Bootstrap文件上传组件
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- bootstrap File Input 多文件上传插件使用记录(二)删除原文件
在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...
随机推荐
- 王者荣耀交流协会第6次Scrum立会
Scrum master :刘耀泽 任思佳的导入excel原型博客地址:http://www.cnblogs.com/rensijia/p/7766812.html 王玉玲psp表格记录功能博客地址: ...
- 全栈https
前言:在httpd中使用已经被私有CA签署的证书,对外提供一个https服务 配置httpd服务支持使用https 1:配置httpd支持使用ssl,及使用的证书 yum -y install mod ...
- 数学口袋精灵感受与BUG
232朱杰 http://www.cnblogs.com/alfredzhu https://github.com/alfredzhu/ 组长,团队 230蔡京航 http://www.cnblogs ...
- linux 内核态调试函数BUG_ON()[转]
一些内核调用可以用来方便标记bug,提供断言并输出信息.最常用的两个是BUG()和BUG_ON(). 当被调用的时候,它们会引发oops,导致栈的回溯和错误信息的打印.为什么这些声明会导致 oops跟 ...
- c# AOP 文章地址
AOP:aspect oriented programing 面向切面编程.大概就是在程序的指定地方,可以做拦截然后插入执行指定的一段程序,这种模式在写日志,权限检查等操作很有用,这些操作都是固定的处 ...
- set集合,深浅拷贝以及部分知识点补充
目录: 1.基础数据类型补充 2.set集合 3.深浅拷贝 一,基础数据类型补充 字符串的基本操作 li = ["李李嘉诚", "麻花藤", "⻩黄海 ...
- H Hip To Be Square Day5——NWERC2012
这个题目巨坑啊.调试的时间加起来绝对超过1天整. 不过终于调试出来了,真心感动地尿流满面啊. 题目的意思是给你一个区间[A,B],可以从区间里选出任意多个整数,使得这些整数的积是一个不超过 2^126 ...
- 【bzoj4355】Play with sequence 线段树区间最值操作
题目描述 维护一个长度为N的序列a,现在有三种操作: 1)给出参数U,V,C,将a[U],a[U+1],...,a[V-1],a[V]都赋值为C. 2)给出参数U,V,C,对于区间[U,V]里的每个数 ...
- Xmind8破解,以及相关的流程和破解包
一.下载XMindCrack.jar文件:(传的貌似被屏蔽了:如果需要请留下邮箱,抽空会发给你) 百度云 ,里面破解文件,安装包都给了,但Xmind安装包不一定是最新的,有需求的可自行去官网下载 . ...
- 【JavaScript&jQuery】返回顶部
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...