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 prototype,executing,context,closure
Dec 24 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 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的5个入手程序
2006/11/23 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
10 个经典PHP函数
2013/10/17 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
javascript Demo模态窗口
2009/12/06 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
JavaScript模拟push
2016/03/06 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python selenium firefox使用详解
2019/02/26 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python如何爬取网页中的文字
2020/07/28 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
外贸业务员的岗位职责
2013/11/23 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
2016年教师节慰问信
2015/12/01 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书