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 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
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 PDO函数库详解
2010/04/27 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
JS获取父节点方法
2009/08/20 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python简单判断序列是否为空的方法
2015/06/30 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
房屋买卖协议书范本
2014/04/10 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
千手观音观后感
2015/06/03 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis