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 相关文章推荐
Js sort排序使用方法
Oct 17 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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学习笔记 数组遍历实现代码
2011/06/09 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
屏蔽相应键盘按钮操作
2014/03/10 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
jQuery.each使用详解
2015/07/07 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
Python找出9个连续的空闲端口
2016/02/01 Python
Python网络编程详解
2017/10/31 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python实现微信表情包炸群功能
2021/01/28 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
数学专业推荐信范文
2013/11/21 职场文书
优秀交警事迹材料
2014/01/26 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
幼儿园秋游感想
2014/03/12 职场文书
班主任寄语大全
2014/04/04 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
学生犯错保证书
2015/05/09 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
Java Spring读取和存储详细操作
2022/08/05 Java/Android