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为单选框checkbox绑定单击click事件
Dec 18 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 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
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php算法实例分享
2015/07/14 PHP
利用php输出不同的心形图案
2016/04/22 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
在vue中获取dom元素内容的方法
2017/07/10 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python实现图片拼接的代码
2018/07/02 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
关于读书的演讲稿800字
2014/08/27 职场文书
学校四风对照检查材料
2014/08/28 职场文书
学校2014年度工作总结
2014/12/06 职场文书
教师节校长致辞
2015/07/31 职场文书
交通安全教育主题班会
2015/08/12 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis