官方github：https://github.com/kartik-v/bootstrap-fileinput

官方dome网站：http://plugins.krajee.com/file-basic-usage-demo

博客参考：http://www.cnblogs.com/wuhuacong/p/4774396.html

如何下位案例：其中bootstrap为3.3.5，jquery为2.1.1，bootstrap-fileinput为3.x

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

<link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.

     This must be loaded before fileinput.min.js -->

<script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>

<script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>

<!-- bootstrap.js below is only needed if you wish to the feature of viewing details

     of text file preview via modal dialog -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>

<!-- optionally if you need translation for your language then include

    locale file as mentioned below -->

<script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>

 </head>

 <body>

  <label class="control-label">Select File</label>

<input id="input-1" type="file" class="file">

<label class="control-label">Select File</label>

<input id="input-1a" type="file" class="file" data-show-preview="false">

<label class="control-label">Select File</label>

<input id="input-2" name="input2[]" type="file" class="file" multiple data-show-upload="false" data-show-caption="true">

<label class="control-label">Readonly Input</label>

<input id="input-3a" type="file" class="file" readonly="true">

<label class="control-label">Disabled Input</label>

<input id="input-3b" type="file" class="file" disabled="true">

<label class="control-label">Select File</label>

<input id="input-4" name="input4[]" type="file" multiple class="file-loading">

<script>

$(document).on('ready', function() {

    $("#input-4").fileinput({showCaption: false});

});

</script>

<label class="control-label">Select File</label>

<input id="input-6" name="input6[]" type="file" multiple class="file-loading">

<script>

$(document).on('ready', function() {

    $("#input-6").fileinput({

        showUpload: false,

        maxFileCount: 10,

        mainClass: "input-group-lg"

    });

});

</script>

<label class="control-label">Select File</label>

<input id="input-7" name="input7[]" multiple type="file" class="file file-loading" data-allowed-file-extensions='["csv", "txt"]'>

 </body>

</html>

bootstrap-fileupload-上传文件控件的更多相关文章

  1. 兼容IE浏览器样式的html上传文件控件

    最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统 ...

  2. Webform之FileUpload(上传按钮控件)简单介绍及下载、上传文件时图片预览

    1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示 ...

  3. jquery上传文件控件Uploadify

    基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...

  4. jQuery上传文件控件Uploadify使用

    Uploadify是JQuery的一个上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件等. 首先应下载jQuery和uploadify插件 jQuery下载地址:h ...

  5. html+css上传文件控件美化

    html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. ASP.NE 上传文件控件

    protected void Button1_Click(object sender, EventArgs e) { //if (Request["id"]==null & ...

  7. asp.net 页面上传文件控件后台代码Request.Files获取不到

    今天开发中遇到页面文件上传控件选择了文件,而后台Request.Files.Count取值为0,之前开发中遇到过几次,老是忘掉,今天记下来. html: <input type="fi ...

  8. 用JS怎么判断上传文件控件是否未选择文件

    页面代码: <form name="form1" action="uploadPosdetailFile.html" method="post& ...

  9. FileUpload 上传文件，并实现c#使用Renci.SshNet.dll实现SFTP文件传输

    fileupload上传文件和jquery的uplodify控件使用方法类似,对服务器控件不是很熟悉,记录一下. 主要是记录新接触的sftp文件上传.服务器环境下使用freesshd搭建好环境后,wi ...

  10. JSP/Serlet 使用fileupload上传文件

    需要引用的jar commons-fileupload-1.3.1.jar commons-io-2.2.jar index.jsp <body> <center> <h ...

随机推荐

  1. 配置WebSite的IIS时遇到的问题与解决方法

    http://www.cnblogs.com/mingmingruyuedlut/archive/2011/11/04/2235630.html#commentform

  2. Android应用程序（APK）的编译打包过程

    (9878) (7) 现在很多人想对Android工程的编译和打包进行自动化,比如建立每日构建系统.自动生成发布文件等等.这些都需要我们对Android工程的编译和打包有一个深入的理解,至少要知道它的 ...

  3. .Net Core 控制台程序错误：Can not find runtime target for framework '.NETCoreApp,Version=v1.0' compatible with one of the target runtimes: 'win10-x64, win81-x64, win8-x64, win7-x64'.

    .Net Core 控制台程序错误:Can not find runtime target for framework '.NETCoreApp,Version=v1.0' compatible wi ...

  4. 链剖&LCT总结

    在搞LCT之前,我们不妨再看看喜闻乐见的树链剖分. 树链剖分有一道喜闻乐见的例题:NOI2015 软件包管理器 如果你看懂题目了,你就会明白它是叫你维护一个树,这棵树是不会动的,要兹磁子树求和,子树修 ...

  5. python读取配置文件

    从/mnt目录下读取section配置文件sample.ini [db] host=192.168.1.116 hostaddr=192.168.1.116 port=5432 dbname=clas ...

  6. linux基本工具使用(二)

    1 查找某个目录下面一个所有的可执行文件,并且删除(对删除一个工程的可执行文件格外有用) find . -maxdepth 1 -file f -perm -111 | xargs rm

  7. DLL放在指定目录 以及设置dll调用路径

    一.DLL放在指定目录 在编写C# winform程序中,不免一个项目会有多个工程文件,而这些工程文件之间是相互引用的,所以不想将工程的生成结果(exe或者dll)放在当前工程bin目录下的Debug ...

  8. PCL 库安装

    参考资料: http://www.cnblogs.com/newpanderking/articles/4022322.html VS2010+PCL配置 PCL共有两种安装方式 安全安装版,个人配置 ...

  9. 【转】CSS Sprites教程大全（使用方法、工具介绍）

    什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...

  10. 如何在batch脚本中嵌入python代码

    老板叫我帮他测一个命令在windows下消耗的时间,因为没有装windows那个啥工具包,没有timeit那个命令,于是想自己写一个,原理很简单: REM timeit.bat echo %TIME% ...