Bootstrap自定义文件上传下载样式

在平时工作中，文件上传下载功能属于不可或缺的一部分。bootstrap前端样式框架也使用的比较多，现在根据bootstrap强大的样式模板，自定义一种文件下载的样式。

后续会使用spring MVC框架实现文件上传的全部代码，敬请期待。

先看图片示例： 本示例包括下载样本文件样式和上传文件样式。

直接先上代码，最后讲解：

<div class="form-group col-md-12 has-feedback" id="file">
    <label for="" class="control-label col-md-4">选择文件:</label>
    <div class="col-md-4 input-group">
    <input id="lefile" type="file" style="display:none">
    <span class="input-group-addon" onclick="$('input[id=lefile]').click();" style="cursor: pointer; background-color: #e7e7e7"><i class="fa fa-folder-open"></i>Browse</span>
    <input id="photoCover" class="form-control" type="text">
    <span class="fa fa-download form-control-feedback" style="cursor: pointer;pointer-events: auto;"></span>
    </div>
   </div>

主要涉及到的技术有：bootstrap；css3的pointer-events；html5

1. html5的基本文件上传样式

<input type="file" name="file">
样式会根据不同的浏览器显示不同的效果。

2. 字体图标

可以使用bootstrap内置的glyphicons字体图标，也可以使用Font Awesome的字体图标。具体使用教程参考官网：

glyphicons： http://v3.bootcss.com/components/#glyphicons

Font Awesome： http://fontawesome.io/

本例中使用到两个图标， <i class="fa fa-folder-open"><i class="fa fa-download">

或者<i class="glyphicons glyphicons-folder-open"><i class="glyphicons glyphicons-download-alt">

3. css3 ：pointer-events

在bootstrap中， .form-control-feedback 的pointer-events设置为none， 导致在点击下载样本按钮时无法选取元素，现在设置为auto。

语法：

pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默认值：auto

适用于：所有元素

继承性：有

动画性：否

计算值：指定值

取值：

auto：与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。

4. 上传文件的按钮实现 ----- bootstrap组合框的使用

.input-group 和 .input-group-addon的使用。

具体的css渲染自行查看bootstrap源代码。

5. 下载样本按钮的实现 --- 参考bootstrap的表单错误提示样式

.has-feedback和.form-control-feedback的使用

如果还没有学习够的话大家可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

以上就是本文的全部内容，希望对大家学习Bootstrap程序设计有所帮助。

赞 (0)

相关推荐

  • BootStrap fileinput.js文件上传组件实例代码

    BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

  • JS文件上传神器bootstrap fileinput详解

    JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过

  • BootStrap 实现各种样式的进度条效果

    BootStrap 实现各种样式的进度条效果

    Bootstrap提供了各式各样的进度条效果,下面通过实例代码给大家详细介绍,具体详情如下所示: 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1&quo

  • 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/

  • Bootstrap fileinput文件上传预览插件使用详解

    Bootstrap fileinput文件上传预览插件使用详解

    介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p

  • Bootstrap文件上传组件之bootstrap fileinput

    Bootstrap文件上传组件之bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap的一些常用组件,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput.在此记录下,就算做个学习笔记,也给需要使用的朋友提供点方便. Bo

  • spring MVC + bootstrap实现文件上传示例（带进度条）

    spring MVC + bootstrap实现文件上传示例（带进度条）

    最近学习了bootstrap,有结合了spring MVC写了个文件上传的示例,留做笔记,废话不多说,直接上代码 监听器类FileUploadProgressListener.Java package com.gpl.web.listener; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereo

  • BootStrap Progressbar 实现大文件上传的进度条的实例代码

    1.首先实现大文件上传,如果是几兆或者几十兆的文件就用基本的上传方式就可以了,但是如果是大文件上传的话最好是用分片上传的方式.我这里主要是使用在客户端进行分片读取到服务器段,然后保存,到了服务器段读取完了之后将分片数据进行组合. 2.前端代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Htm

  • BootStrap实现文件上传并带有进度条效果

    1.做了一天终于做出来了,在上传成功之后,可以将路径添加到数据库,因为一直在烦恼如何在上传成功之后在将路径添加到数据库,终于弄出来了,太开心了,不得不说bootstrap的强大,之前说ajax不能上传文件,之后想办法,用js写,更改了上传文件按钮的样式,但是没想到bootstrap真的太厉害了,样式还不错,可以预览,图片,限制文件的大小,格式等等,还有进度条. 后台的代码在之前写过了 这只有前台的代码 记得:在验证的时候,尽量用控制台来验证,有的时候你的代码写对了,但是有可能alert不显示 c

  • Bootstrap自定义文件上传下载样式

    Bootstrap自定义文件上传下载样式

    在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框架实现文件上传的全部代码,敬请期待. 先看图片示例: 本示例包括下载样本文件样式和上传文件样式. 直接先上代码,最后讲解: <div class="form-group col-md-12 has-feedback" id="file"> <label

  • Bootstrap fileinput文件上传组件使用详解

    Bootstrap fileinput文件上传组件使用详解

    一.使用方法 1.导入依赖的js和css文件: <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/fileinput.min.css" /> <script type="text/javascript" src="js/jquery-3.2.1

  • nodejs+express实现文件上传下载管理网站

    nodejs+express实现文件上传下载管理网站

    nodejs+express-实现文件上传下载管理的网站 项目Github地址:https://github.com/qcer/updo 后端:基于nodejs的express的web框架. 前端:bootstrap框架+vuejs.jquery等js库 功能点: dronzone.js实现文件拖拽上传.下载,可自定义传输容量. vuejs实现表格双向数据绑定. jquery.form.min.js表单插件,升级表单,实现表单提交回调. 纯css+jQuery实现一键返回顶部. 简单的ajax异

  • Bootstrap Fileinput文件上传组件用法详解

    Bootstrap Fileinput文件上传组件用法详解

    最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.boot

  • Spring MVC 文件上传下载的实例

    Spring MVC 文件上传下载,具体如下: (1) 导入jar包:ant.jar.commons-fileupload.jar.connom-io.jar. (2) 在src/context/dispatcher.xml中添加 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEnc

  • Java实现的文件上传下载工具类完整实例【上传文件自动命名】

    本文实例讲述了Java实现的文件上传下载工具类.分享给大家供大家参考,具体如下: 这是一个在Eclipse环境下采用Java语言实现文件上传下载的工具类.和之前介绍的C#文件上传下载工具类一样,在上传时,为避免文件名在服务器中重复,采用"服务器时间(定义到毫秒)+文件名+文件后缀"的方式作为服务器上的文件名:下载过程中利用 spring mvc ResponseEntity 做文件下载,返回的是字节流,下载成功后可自定义文件的保存路径. 具体源码如下所示: package com.ut

  • C#实现的文件上传下载工具类完整实例【上传文件自动命名】

    本文实例讲述了C#实现的文件上传下载工具类.分享给大家供大家参考,具体如下: 这里给出的工具类是在VS2013环境下采用C#语言实现文件上传.下载功能.上传时,为避免文件名在服务器中重复,采用"服务器时间+8位随机码+文件名+文件后缀"的方式作为服务器上的文件名:下载采用的是WebAPI的方式进行的,下载成功后可自定义文件的保存路径. 具体源码如下所示: using System; using System.IO; using System.Net; using System.Net.

  • Spring Boot + thymeleaf 实现文件上传下载功能

    Spring Boot + thymeleaf 实现文件上传下载功能

    最近同事问我有没有有关于技术的电子书,我打开电脑上的小书库,但是邮件发给他太大了,公司又禁止用文件夹共享,于是花半天时间写了个小的文件上传程序,部署在自己的Linux机器上. 提供功能: 1 .文件上传 2.文件列表展示以及下载 原有的上传那块很丑,写了点js代码优化了下,最后界面显示如下图: 先给出成果,下面就一步步演示怎么实现. 1.新建项目 首先当然是新建一个spring-boot工程,你可以选择在网站初始化一个项目或者使用IDE的Spring Initialier功能,都可以新建一个项目

  • springboot操作阿里云OSS实现文件上传,下载,删除功能

    参考资料:Java操作阿里云OSS操作官方文档 学会看文档,并实际运用也是一种习惯和技能 下面就来简单入门一下,用当下比较热门的Springboot 去操作阿里云OSS文件存储. 1.需求 (没踩过下面的坑的小伙伴可以直接跳过这一章节) 问题简述 首先,我在之前自己做一些开源小项目案例中遇到一些文件上传下载的问题,比如在本机文件上传和下载都可以正常使用,通过将文件上传到Springboot项目的根目录下,按日期分文件夹,文件访问也很方便,可以直接返回文件相对路径地址,并直接可以访问. 问题 然而

随机推荐