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 相关文章推荐
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
vue实现带复选框的树形菜单
May 27 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
通过html表格发电子邮件
2006/10/09 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php商品对比功能代码分享
2015/09/24 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
JS中的phototype详解
2017/02/04 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python加载带有注释的Json文件实例
2018/05/23 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
异步传递消息系统的作用
2016/05/01 面试题
销售员试用期自我评价
2014/09/15 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书