bootstrap fileinput实现文件上传功能


Posted in Javascript onAugust 23, 2017

bootstrap 的上传文件控件号称最好用的,总之我用着到是挺别扭的。

首先这个控件很简单。

html代码

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

可能需要保存按钮等等,这可以另外添加,指定事件方法就行,当然,需要在html中引入bootstrap的相关css和js

fileinput.jsfileinput.css

在你自己的js中,也就是保存按钮等的事件方法中需要写一段关键代码

$('#txt_file').fileinput('upload');

这就是上传的代码。

除了以上这些,还需要一段重要的代码,这个初始化上传控件用的,也就是设置一些必要的参数

function initFileInput(ctrlName, uploadUrl) {
  var control = $('#' + ctrlName);
  control.fileinput({
   language: 'zh', //设置语言
   uploadUrl: uploadUrl, //上传的地址
   allowedFileExtensions : ['txt', 'doc','docx'],//接收的文件后缀
   showUpload: false, //是否显示上传按钮
   showCaption: false,//是否显示标题
   enctype: 'multipart/form-data',
   browseClass: "btn btn-primary", //按钮样式    
   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
   uploadExtraData: function() { //额外参数的关键点
     return data;
    }
   }).on("fileuploaded", function (event, data, previewId, index) {
    fileResponseData.push(data.response.Attach);
   });
 }
 
 //-----入口方法-----
 $(function() {
  initFileInput("txt_file", "/updateFile.do");
 });

设置这些后,bootstrap就可以自动上传文件,具体上传的规则,是由项目的controller控制的。

关于回调函数,就是 on("dileuploaded",func......),这是附件上传成功后就会调用一次,也有刚选择附件时的回调函数,关键字是filebatchselected

关键说一下bootstrap的上传机制,它支持多文件上传,是多线程来上传文件,一个附件传一次,因此上传成功后的回调函数是会调用多次的。

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

Javascript 相关文章推荐
几个有趣的Javascript Hack
Jul 24 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
setTimeout学习小结
Feb 08 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
jQuery Position方法使用和兼容性
Aug 23 #jQuery
详解EasyUi控件中的Datagrid
Aug 23 #Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 #Javascript
Bootstrap table使用方法记录
Aug 23 #Javascript
JS实现浏览上传文件的代码
Aug 23 #Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 #jQuery
JS轮播图实现简单代码
Feb 19 #Javascript
You might like
PHP 身份验证方面的函数
2009/10/11 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python中类的一些方法分析
2014/09/25 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
python web框架学习笔记
2016/05/03 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
python生成任意频率正弦波方式
2020/02/25 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
电子商务个人自荐信
2013/12/12 职场文书
运动会通讯稿400字
2014/01/28 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
防震减灾主题班会
2015/08/14 职场文书
2016年教师新年寄语
2015/08/18 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android