bootstrap-fileinput初体验

原文:http://www.htmleaf.com/html5/html5muban/201505091801.html

Document & Demo: http://plugins.krajee.com/file-input/demo

bootstrap-fileinput是一款基于Bootstrap 3.x的HTML5文件上传插件。该文件上传插件带有预览图效果,可同时选择多个文件。

该插件使用bootstrap CSS3样式来制作文件上传界面,美观大方。并且它提供了多国语言,你可以选择使用中文。

该文件上传插件比普通的文件上传插件功能更强大,它可以对图片、文本文件、HTML文件、视频文件、音频文件、flash文件生成预览图。另外,它还可以基于AJAX上传文件,拖拽上传文件,查看上传进度,可以选择性的预览,添加或删除文件。

引入文件:

 1 <link href="/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 2 <link href="/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
 3 <script src="jquery/2.1.1/jquery.min.js"></script>
 4 <script src="path/to/js/fileinput.min.js"></script>
 5 <!-- bootstrap.js below is only needed if you wish to the feature of viewing details
 6      of text file preview via modal dialog -->
 7 <script src="bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
 8 <!-- optionally if you need translation for your language then include
 9     locale file as mentioned below -->
10 <script src="path/to/js/fileinput_locale_zh.js"></script>  
1 <form enctype="multipart/form-data" method="POST">
2     <div class="form-group">
3         <input id="file-1" type="file" multiple class="file" name="userfile" data-overwrite-initial="false" data-min-file-count="2">
4     </div>
5 </form>
 1 <script type="text/javascript">
 2     $("#file-1").fileinput({
 3             uploadUrl: ‘fileupload‘, // you must set a valid URL here else you will get an error
 4             allowedFileExtensions : [‘jpg‘,‘png‘],
 5             overwriteInitial: false,
 6             maxFileSize: 6000,
 7             maxFilesNum: 10,
 8             //allowedFileTypes: [‘image‘, ‘video‘, ‘flash‘],
 9             slugCallback: function(filename) {
10                 return filename.replace(‘(‘, ‘_‘).replace(‘]‘, ‘_‘);
11             }
12         });
13 </script>

参数配置:

  • showCaption:是否显示文件的标题。默认值true
  • showPreview:是否显示文件的预览图。默认值true
  • showRemove:是否显示删除/清空按钮。默认值true
  • showUpload:是否显示文件上传按钮。默认是submit按钮,除非指定了uploadUrl属性。默认值true
  • showCancel:是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true
  • captionClass:在标题容器上额外的class。类型string
  • previewClass:在预览区域容器上的额外的class。类型string
  • mainClass:添加在文件上传主容器。类型string
  • initialDelimiter:在initialPreview属性中用于上传多个文件时的分隔符。默认值:‘*$$*‘
  • initialPreview:类型stringarray。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串,会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组,初始化预览图中会显示数组中所有的文件。

其中的一个demo效果展示:

时间: 2024-10-13 03:06:42

bootstrap-fileinput初体验的相关文章

Bootstrap 4-alpha 初体验

What is Bootstrap? 第一句话就是废话了,作为新时代有理想有节操的开发人员无人不知无人不晓.可能就是熟悉程度因为各种原因不尽相同,有人只是知道他大概是个什么东西,有些人可能基本可以使用,有些人可能深有体会.但是纠正一下一个比较常见的问题,可能我这个人比较矫情,Bootstrap是一个单词,不要写成了BootStrap,还有重音在第一个字母http://fanyi.baidu.com/#en/zh/bootstrap,尊重作者. Bootstrap是新时代Web开发前端展示整体的解

AngularJS路由系列(3)-- UI-Router初体验

本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新.查看路由,路由事件和URL格式,获取路由参数,路由的Resolve3.AngularJS路由系列(3)-- UI-Router初体验4.AngularJS路由系列(4)-- UI-Router的$state服务.路由事件.获取路由参数5.AngularJS路由系列(5)-- UI-Router的路由

JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

原文:JS组件系列--Bootstrap文件上传组件:bootstrap fileinput 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:

Netty初体验

一.概述 Netty基于NIO的网络编程框架,是一个封装了NIO复杂的底层细节,可以拿来开发高并发的服务端和客户端的程序,简单直白你可以理解它就是一个好用的处理socket的东西就行啦. 二.Netty初体验 首先,创建maven工程添加Netty依赖,新建两个包,一个是客户端,一个服务端,先来看看服务端代码,这个是服务器类,主要的逻辑都在这里实现. public class Server { public static void main(String[] args) throws Excep

SpringCloud Feign 之 Fallback初体验

SpringCloud Feign 之 Fallback初体验 在微服务框架SpringCloud中,Feign是其中非常重要且常用的组件.Feign是声明式,模板化的HTTP客户端,可以帮助我们更方便快捷调用HTTP API.本文主要针对Feign的熔断机制Fallback进行简单介绍.Fallback主要是用来解决依赖的服务不可用或者调用服务失败或超时,使用默认的返回值. 1.引入Feign pom依赖包 <dependency> <groupId>org.springfram

erlang 初体验

最近测试了一下 erlang的坑... 如不出意外.... 大家第一眼看到这语法... 心里第一句一定是"我擦.这TM都是啥!!!!!" 没有变量!!! 没有结构体!!! 没有循环!!! 好吧,至少我是这样想的. 找了半天..连个if也不知道怎么写.. 这记录一些基本常识.. -module(module_name)  %%定义模块 括号内的要和文件名相同. -export([fun1/1 fun2/2]) %%这里是导出2个函数对外使用  函数名/参数名. 一个简单的函数定义如下 f

linux初体验

第一次听到linux这个'词语'是在一次偶然的朋友聊天中朋友提到的,之前压根没听到过'这个东西',所以我可以说是个linux的新新手,菜鸟都不算. 截至到目前,我已经开始linux系统运维学习有差不多10天时间了.在没接触linux之前,我对它的认识仅仅是:它是个计算机系统.决定学习linux系统运维之前,自我以为运维应该是对系统的一些日常维护之类的,不会很难的东西,我更希望运维是个不难的东西,我个人很笨,对难的东西可能接受的很慢,所以我愿意认为运维是很简单的,这样我就可以轻轻松松的掌握运维相关

【Spark深入学习 -15】Spark Streaming前奏-Kafka初体验

----本节内容------- 1.Kafka基础概念 1.1 出世背景 1.2 基本原理 1.2.1.前置知识 1.2.2.架构和原理 1.2.3.基本概念 1.2.4.kafka特点 2.Kafka初体验 2.1 环境准备 2.2 Kafka小试牛刀 2.2.1单个broker初体验 2.2.2 多个broker初体验 2.3 Kafka分布式集群构建 2.3.1 Kafka分布式集群构建 2.3.2 Kafka主题创建 2.3.3 生产者生产数据 2.3.4消费者消费数据 2.3.5消息的

Java8初体验(二)Stream语法详解

原文链接:http://ifeve.com/stream/ 1. Stream初体验 我们先来看看Java里面是怎么定义Stream的: A sequence of elements supporting sequential and parallel aggregate operations. 我们来解读一下上面的那句话: Stream是元素的集合,这点让Stream看起来用些类似Iterator: 可以支持顺序和并行的对原Stream进行汇聚的操作: 大家可以把Stream当成一个高级版本的

hibernate--CRUD初体验

hibernate的crud操作初体验. 看具体实例 package com.fuwh.model; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.Id; import org.hibernate.annotations.GenericGenerator; @Entity publ