1.插件下载地址:https://github.com/kartik-v/bootstrap-fileinput

2.插件的引用

  需要引用jquery

  需要结合bootstrap使用,即页面需要引入bootstrap相关js和css文件

  引用fileinput.js 和css

  中文需要引用js/locales/zh.js

  需要主题样式时引用themes下相关文件夹中的js和css

  tips:最好以上按顺序引用,免得出现莫名其妙的问题,比如zh.js必须在fileinput.js后引用否则无效

3.插件的代码部分

4.插件的部分属性说明

  1.multiple表示允许同时上传多个文件,class=“file-loading”表示标签的样式。这里很重要,如果class="file",则中文化不能生效。

  2.accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。这个属性和插件allowedFileExtensions属性看起来一样但是插件的

  allowedFileExtensions属性只是你选择了文件类型之后他会提示你禁止上传,如图

 

  而accept 属性则是在点击选择文件之后,文件框里只会出现你写在accept 属性的后缀名的文件.可以在一开始就避免用户选择错误的文件类型,当然如果直接拖进控件,那

也是没有办法,如图:

  这张是没有加accept 属性

   这张是加了accept="image/*,.pdf,.xls,.xlsx,.docx,.doc"的图片

  

  3.部分要使用的方法

 

  4.有的想去除掉控件中的一些按钮,如图

 

  showUpload,showRemove属性是是否显示红色的部分的移除,上传按钮是否显示.

  而黑色部分按钮的隐藏显示则是由fileActionSettings这个属性来决定的

  具体的内容请看http://plugins.krajee.com/file-input/plugin-options#fileActionSettings

  写一个class内容为display:none;然后把这个class赋值给对应的属性就ok了.如图

    

   效果如第三张图,图片右下角删除按钮已被禁用掉.

 5.Controller中的代码

 

ok,这篇文章只是介绍了一个大概的部分.具体的也可参考网上大佬们的介绍.

 

 

 

 

 

 

文件上传控件bootstrap-fileinput的使用的更多相关文章

  1. ***文件上传控件bootstrap-fileinput的使用和参数配置说明

    特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...

  2. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  3. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  4. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

  5. 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)

    引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...

  6. 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法

    今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...

  7. 对FileUpload文件上传控件的一些使用方法说明

    //创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...

  8. 符合BME风格的弹窗\菜单\表格\文件上传控件

    1.弹窗 2.菜单 3.表格 4.文件上传控件 笔记补充......

  9. jquery文件上传控件 Uploadify 可以和ajax交互

    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  10. jquery文件上传控件 Uploadify(转)

    原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...

随机推荐

  1. 收藏vue技术内幕

    http://hcysun.me/vue-design/art/7vue-reactive.html#observer-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0

  2. How hacker do IT: Tricks Tools and Techniques (翻译)

    本资料是 Alex Noordergraaf 企业产品的说明书   现在整理如下: 第一部分: How hackers Do It : Tricks   Tools  and Techniques 本 ...

  3. python学习-抓取知乎图片

    #!/bin/usr/env python3 __author__ = 'nxz' """ 抓取知乎图片webdriver Chromedriver驱动需要安装,并指定d ...

  4. PHP将图片转base64编码以及base64图片转换为图片并保存代码

    图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...

  5. C# BackJson Beautiful format

    using System; using System.Collections.Generic; using System.Linq; using System.Web;   public class ...

  6. Codeforces 677E Vanya and Balloons

    Vanya and Balloons 枚举中心去更新答案, 数字过大用log去比较, 斜着的旋转一下坐标, 然后我旋出来好多bug.... #include<bits/stdc++.h> ...

  7. 1103_ddt 数据处理

    1.传入一个参数 import unittest from ddt import ddt,data,unpack @ddt class MyTestCase1(unittest.TestCase): ...

  8. C语言--第四次作业--数组

    1.本章学习总结 1.1 思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 不知不觉都快学习C语言结束了,自从开始了数组的学习就感觉难度瞬间几何级上升鸭(让人头大,感觉到了各种绝望), ...

  9. notes for lxf(四)

    类名首字母通常大写 创建实例 类名 +() __init__方法 创建实例时把一些属性绑上去 __init__方法第一参数永远是self 表示船舰的实例本身 类是实例的模板 实例是一个一个具体的对象 ...

  10. 我的BO之强类型

    弱类型的缺点 有些程序员对类型比较随意,从前端传来的数据,不管应该是什么类型,都以String接收.然后在什么地方转成应该有的类型则要"看心情",在Controller, Serv ...