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 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
AngularJS内置指令
Feb 04 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
JSON stringify方法原理及实例解析
Oct 23 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引用地址改变变量值的问题
2012/03/23 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
javascript定时保存表单数据的代码
2011/03/17 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
python使用htmllib分析网页内容的方法
2015/05/08 Python
python实现web方式logview的方法
2015/08/10 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
高一生物教学反思
2014/01/17 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
销售人员管理制度
2015/08/06 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL