bootstrap-fileupload-上传文件控件

官方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>
时间: 2024-10-11 07:24:00

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

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

最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统一样式,我参考了网上的许多方法,下面给出我自己的代码实现(实际上就是在原生的input file上面加个外壳,再添加一些样式,让它看上去不像原生的这么丑) html部分 <div class="upload-box"> <div class="input&quo

jquery上传文件控件Uploadify

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图: 用法: 首先引用下面的文件 <link rel="stylesheet" type="text/css&

上传文件控件

我们在编写页面的时候会遇到这样的情况,需要上传文件.我们一般会使用<input type="file" />来处理. 但是他会有一个小问题.下面我们一起来看一看. 不同浏览器下式样差别较大. IE8:在按钮前面有一个文本框用来显示文件路径. chrome:在按钮后面显示文件上传状态.默认文言略有不同. Firefox:与chrome相似. 不同浏览器下的式样不同,导致我们不能基于一个稳定的式样做设置,当我们设置width和height也会遮盖不同的部分. 解决方案1:将&l

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

1.FileUpload上传控件:(原文:http://www.cnblogs.com/hide0511/archive/2006/09/24/513201.html) FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\TestFile.txt)来指定要上载的文件.用户也可以通过单击“浏览”按钮,然后在“选择文件”对话框中定位文件来选择文件.  

html+css上传文件控件美化

html上传美化: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件</title> <style> label { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #9

上传文件控件的样式美化

实现原理: 第一步:分别建一个input[type=text].一个input[type=button]标签,优化样式: 第二步:把input[type=file]标签,设置透明,位置对齐以上的两个标签并位于其底部: 第三步:用jquery实现把input[type=file]的文字显示在input[type=text]框内. html: <div class="uploader"> <input class="fileName" type=&qu

FileUpload 上传文件 帮助类

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

asp.net中fileupload上传文件的方法

FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles\test.txt)来指定要上载的文件.用户也可以通过单击“浏览”按钮,然后在“选择文件”对话框中定位文件来选择文件. 用户选择要上载的文件后,FileUpload 控件不会自动将该文件保存到服务器.您必须显式提供一个控件或机制,使用户能提交指定的文件.例如,可以提供一个按钮,用户单击它即可上载文件

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

fileupload上传文件和jquery的uplodify控件使用方法类似,对服务器控件不是很熟悉,记录一下. 主要是记录新接触的sftp文件上传.服务器环境下使用freesshd搭建好环境后,windos环境下可视化工具filezilla可#以很容易实现文件的传输. 本例中主要是c#使用Renci.SshNet.dll实现SFTP文件传输. 代码如下: protected void btnExcelImport_Click(object sender, EventArgs e) { if (

fileUpload上传文件,并设置文件名以及保存服务器位置

我做的是上传Excel文件,保存内容到数据库. 下面部分代码是fileUpload上传文件,并设置文件名以及保存服务器位置. if (fileUpload.HasFile) { string fileNameNo = Path.GetFileName(fileUpload.PostedFile.FileName); //获取文件名和扩展名 fileNameNo = fileNameNo.Replace("(", "-").Replace(")",