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 Validation插件remote验证方式的Bug解决
Jul 01 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 Javascript
php+js实现倒计时功能
Jun 02 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
对比分析json及XML
2014/11/28 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
Python 列表(List)操作方法详解
2014/03/11 Python
python保存数据到本地文件的方法
2018/06/23 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python使用udp实现聊天器功能
2018/12/10 Python
matplotlib实现区域颜色填充
2019/03/18 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python 字符串池化的前提
2020/07/03 Python
python使用建议技巧分享(三)
2020/08/18 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
信息管理应届生求职信
2014/03/07 职场文书
安全责任书范文
2014/03/12 职场文书
课外访万家心得体会
2014/09/03 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
主持人大赛开场白
2015/05/29 职场文书
高一地理教学工作总结
2015/08/12 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python