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插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...
随机推荐
- 软件工程-东北师大站-第四次作业PSP
1.本周PSP 2.本周进度条 3.本周累计进度图 代码累计折线图 博文字数累计折线图 4.本周PSP饼状图
- c#程序的阅读
1 .程序是为表示两个连续的整数不能被整除. 2 ,3 程序黑框得不出结果,所以不知道具体的结果和运行时间. 4 采用更好的专用电脑进行计算.
- 复利计算C语言转java的相关代码
static void principal()// 计算本金 { int N, m; double i, F, P; System.out.printf("复利终值:"); F = ...
- IBM存储降级告警等一些服务器问题/dd/ethtool
1.IBM存储降级告警 一般两种情况 a.端口降级 例如模块16G->8G(IBM储存端口自适应) b.系统在作raid后,有硬盘损坏,降级 黄灯告警 2. dimm error dimm内存插 ...
- 爬虫学习之-操作mysql
在操作数据库的时候,python2中一般使用mysqldb,但在python3中已经不在支持mysqldb了,我们可以用pymysql和mysql.connector.本文的所有操作都是在python ...
- pixi.js tools
pixi群 881784250 Awesome pixi.js tools A list of useful libs/resources/tools for renowned html5 rende ...
- CPU测试--通过proc获取CPU信息
adb shell cat /proc/stat | grep cpu > totalcpu0 此处第一行的数值表示的是CPU总的使用情况,所以我们只要用第一行的数字计算就可以了.下表解析第一行 ...
- hdu6021[BestCoder #93] MG loves string
这场BC实在是有趣啊,T2是个没有什么算法但是细节坑的贪心+分类讨论乱搞,T3反而码起来很顺. 然后出现了T2过的人没有T3多的现象(T2:20人,T3:30人),而且T2的AC率是惨烈的不到3% ( ...
- Debugging QML Applications
Debugging QML Applications Console API Log console.log, console.debug, console.info, console.warn an ...
- 转:Python 文本挖掘:使用gensim进行文本相似度计算
Python使用gensim进行文本相似度计算 转于:http://rzcoding.blog.163.com/blog/static/2222810172013101895642665/ 在文本处理 ...