官方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. Makefile总述②文件命名、包含其他文件makefile、变量、重建重载、解析

    Makefile的内容 在一个完整的 Makefile 中,包含了 5 个东西:显式规则.隐含规则.变量定义.指示符和注释. 显式规则:它描述了在何种情况下如何更新一个或者多个被称为目标的文件( Ma ...

  2. [No00003A]操作系统Operating Systems 内核级线程Kernel Threads内核级线程实现Create KernelThreads

    开始核心级线程 内核级线程对多核的支持怎么样? 和用户级相比,核心级线程有什么不同? ThreadCreate 是系统调用,内核管理TCB ,内核负责切换线程 如何让切换成型? − − 内核栈,TCB ...

  3. [No000009]学习重要还是经营人脉重要？

    大说数人的朋友圈都是这样的:雪中送炭的寥寥无几,锦上添花的大多数人连你自己都不认识,碰到倒霉的时候还能遇到落进下石的.人脉是很重要,可相对自身的学习来说,就没有想象中那么重要了. 有一次在北大讲座,遇 ...

  4. 收集入侵Windows系统的证据

    随着网络的不断扩大,网络安全更加会成为人们的一个焦点,同时也成为是否能进一步投入到更深更广领域的一个基石.当然网络的安全也是一个动态的概念,世界上没有绝对安全的网络,只有相对安全的网络.相对安全环境的 ...

  5. EF的入门使用 （电影管理）

    控制器代码: public class HomeController : Controller { private NewDBContext ndc = new NewDBContext(); pub ...

  6. HTML 学习笔记 JavaScript (实现)

    HTML中的脚本 必须位于<script></script>标签之间 脚本可被放置在HTML页面的<body>和<head>部分中 <script ...

  7. Python的高级特性6:使用__slots__真的能省很多内存

    在伯乐在线上看到了这篇文章,用Python的 __slots__ 节省9G内存,于是想测试下,对单个类,用__slots__节省内存效果会不会明显. 看完这个例子后,我们也会明白__slots__是用 ...

  8. Java设计模式之-----策略模式

    首先,我们来看下策略模式的概念.一般的解释如下:     策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化.(原文:The St ...

  9. [资料]自动化e2e测试 -- WebDriverJS，Jasmine和Protractor

    1. http://sentsin.com/web/658.html 2. http://www.tuicool.com/articles/AnE3Mb 3. http://www.doc88.com ...

  10. NOI2018准备 Day8

    清北学堂入学测试,6道题凑了363分,平均466才能达到省选班的程度,差距不小. 今天突然感觉最大的BOSS是搜索,虽然每次都写崩...... 3个小时写了一道DP没写出来 但我不会忘记,我的首个目标 ...