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


Posted in Javascript onJune 06, 2017

一、使用方法

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.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script type="text/javascript" src="js/fileinput.js" ></script>
<script type="text/javascript" src="js/zh.js" ></script>
<script type="text/javascript" src="js/my.js" ></script>

2、建立一个文件输入区

<form>
 <div class="form-group">
  <h3>Bootstrap File Input Demo1</h3>
 </div>

 <input name="uploadFile" type="file" id="uploadFile" multiple class="file-loading" />
</form>

3、编写my.js文件,初始化文件上传组件

$(function() {
 //初始化fileinput
 var fileInput = new FileInput();
 fileInput.Init("uploadFile", "http://127.0.0.1/testDemo/fileupload/upload.action");
});

//初始化fileinput
var FileInput = function() {
 var oFile = new Object();

 //初始化fileinput控件(第一次初始化)
 oFile.Init = function(ctrlName, uploadUrl) {
  var control = $('#' + ctrlName);

  //初始化上传控件的样式
  control.fileinput({
   language: 'zh', //设置语言
   uploadUrl: 'http://127.0.0.1/testDemo/fileupload/upload.action', //上传的地址
   allowedFileExtensions: ['jpg', 'png', 'gif'], //接收的文件后缀
   uploadAsync: true, //默认异步上传

   showUpload: false, //是否显示上传按钮
   showRemove: true, //显示移除按钮
   showCaption: true, //是否显示标题

   dropZoneEnabled: true, //是否显示拖拽区域

   //minImageWidth: 50, //图片的最小宽度
   //minImageHeight: 50,//图片的最小高度
   //maxImageWidth: 1000,//图片的最大宽度
   //maxImageHeight: 1000,//图片的最大高度
   //maxFileSize:0,//单位为kb,如果为0表示不限制文件大小
   //minFileCount: 0,
   maxFileCount: 10, //表示允许同时上传的最大文件个数
   enctype: 'multipart/form-data',

   browseClass: "btn btn-primary", //按钮样式: btn-default、btn-primary、btn-danger、btn-info、btn-warning  
   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

  });

  //文件上传完成之后发生的事件
  $("#uploadFile").on("fileuploaded", function(event, data, previewId, index) {

  });
 }
 return oFile; //这里必须返回oFile对象,否则FileInput组件初始化不成功
};

二、效果图

1、初始化界面:

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

2、可以实现多文件上传:

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

3、点击某个文件,可以实现全屏预览:

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

三、Options介绍 

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

四、Method介绍

有空再写

五、源码下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
react路由配置方式详解
Aug 07 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 #Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 #Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 #Javascript
详解Vue 开发模式下跨域问题
Jun 06 #Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 #Javascript
深入理解vue-loader如何使用
Jun 06 #Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 #Javascript
You might like
?生?D片??C字串
2006/12/06 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
php常用数组函数实例小结
2016/12/29 PHP
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
js评分组件使用详解
2017/06/06 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
Node.js事件的正确使用方法
2019/04/05 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python实现图片拼接的代码
2018/07/02 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
婚前协议书范本
2014/04/15 职场文书
个人考核材料
2014/05/15 职场文书
计算机网络专业求职信
2014/06/05 职场文书
群教个人对照检查材料
2014/08/20 职场文书
婚宴邀请函
2015/01/30 职场文书
公司车队管理制度
2015/08/04 职场文书
小学运动会入场口号
2015/12/24 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
MySQL 视图(View)原理解析
2021/05/19 MySQL
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技