在使用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">&times;</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的使用问题的更多相关文章

  1. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  2. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  3. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  4. (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...

  5. 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  6. Bootstrap -- 文件上传插件File Input的使用

    BootstrapFileInput下载参考:http://www.jq22.com/jquery-info5231 网友经验参见:http://www.cnblogs.com/wuhuacong/p ...

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

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  8. Bootstrap文件上传组件

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  9. bootstrap File Input 多文件上传插件使用记录(二)删除原文件

    在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...

随机推荐

  1. java面向对象的有序数组和无序数组的比较

    package aa; class Array{ //定义一个有序数组 private long[] a; //定义数组长度 private int nElems; //构造函数初始化 public ...

  2. php异步学习(2)

    PHP开启异步多线程执行脚本   场景要求 客户端调用服务器a.php接口,需要执行一个长达5s-20s不等的耗资源操作,但是客户端响应请求时间为5秒(微信公众账号服务器请求响应超时时间),5s以上无 ...

  3. iPhone上的CPU架构,核数以及运行内存

    机型 CPU架构 CPU名 CPU位数 CPU核数 运行内存 iPhone 5 ARMv7s A6 32bit 双核 1G iPhone 5c ARMV7s A6 32bit 双核 1G iPhone ...

  4. 随机生成四则运算式2-NEW+PSP项目计划(补充没有真分数的情况)

    PS:这是昨天编写的随机生成四则运算式2的代码:http://www.cnblogs.com/wsqJohn/p/5264448.html 做了一些改进. 补:在上一次的运行中并没有加入真分数参与的运 ...

  5. UI分析之石家庄铁道大学官网

    点击进入石家庄铁道大学的官方网站,首先映入眼帘的是“石家庄铁道大学”七个大字,配以蓝色背景和学校的俯瞰图,给人一种严谨又不失清新的感觉. 学校的网站首页界面主要有九个界面,分别是网站首页,学校概况,组 ...

  6. 基于DPDK的高效数据包捕获技术分析与应用

    被NFV的论文折磨了两天,今天上午看了两篇DPDK的综述. 传统的包捕获机制 1. BPF 两个组成部分:转发部分和过滤部分. 转发部分负责从链路层提取数据包并转发给过滤部分. 过滤部分根据过滤规则, ...

  7. CodeForces 479C Exams 贪心

    题目: C. Exams time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  8. 解决CentOS安装redis局域网内无法访问的问题

    redis4.0版本安装教程晚上非常多,随便贴出来一个:http://www.cnblogs.com/web424/p/6796993.html 安装完成后,在局域网内发现无法访问到redis.cen ...

  9. 【.Net】在WinForm中选择本地文件

    相信很多朋友在日常的编程中总会遇到各钟各样的问题,关于在WinForm中选择本地文件就是很多朋友们都认为很难的一个学习.net的难点, 在WebForm中提供了FileUpload控件来供我们选择本地 ...

  10. hdu 6400 Parentheses Matrix

    题目链接 Problem Description A parentheses matrix is a matrix where every element is either '(' or ')'. ...