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和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
vue组件间通信解析
Mar 01 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
javascript实现随机抽奖功能
Dec 30 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类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
如何在django中实现分页功能
2020/04/22 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
判断单链表中是否存在环
2012/07/16 面试题
社会实践自我鉴定
2013/11/07 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
大家访活动实施方案
2014/03/10 职场文书
生物科学专业自荐书
2014/06/20 职场文书
年终晚会活动方案
2014/08/21 职场文书
教师自查自纠材料
2014/10/14 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
Python创建SQL数据库流程逐步讲解
2022/09/23 Python