官方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. 使用mxmlc在命令行编译.as代码

    在cmd命令行环境下,敲mxmlc出现 提示Error: could not find JRE和"Error: could not find Java 2 Runtime Envi 解决办法 ...

  2. Java MyEclipse下Ant build.xml简单实例详解

    一.下载配置ant 1.首先下载ant: http://www.apache.org/ 下载最新的版本2.解压ant 后设置ANT_HOME, PATH中添加ANT_HOME目录下的bin目录(如:A ...

  3. [转]MVC整合Ajax

    MVC教程第五篇:MVC整合Ajax   2010-02-01 作者:张洋 来源:张洋的BLOG   摘要 本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法 ...

  4. uva216 Getting in Line

    Computer networking requires that the computers in the network be linked. This problem considers a \ ...

  5. 在C++中实现字符串分割--split

    字符串分割 在一些比较流行的语言中,字符串分割是一个比较重要的方法,不论是在python,java这样的系统级语言还是js这样的前端脚本都会在用到字符串的分割,然而在c++中却没有这样的方法用来调用. ...

  6. apache网站访问缓慢的处理记录

    朋友在阿里云上开通了一台ubuntu服务器(2G内存,2核CPU),用apache搭建了一个公众号网站.网站初期,他没有做相应的优化,在后续公众号推广活动时,网站并发突增,访问十分缓慢.登陆服务器,具 ...

  7. PHP核心技术与最佳实践--笔记

    <?php error_reporting(E_ALL); /* php 5.3引入 延迟静态绑定 */ /* php5.4引入trait,用来实现多层继承 trait Hello{} trai ...

  8. php 中的curl

    ① curl上传文件 <?php $postData=array( 'name'=>'123', 'upload'=>'@E:/wamp/www/function/result.zi ...

  9. MIPAV - Talairach ACPC transform

    源地址:http://blog.sina.com.cn/s/blog_64cfe24f0100h358.html 1.打开MIPAV软件,File>open image from disk> ...

  10. DEDECMS之八 漏洞错误和疑难杂症

    1.dedecms文章加粗b属性后出现strong或者b标签修改 dedecms的文章,如果设置了加粗的属性后,文章标题那会自动添加一个strong或者是b标签,如何去掉呢,方法如下: a.更改自动添 ...