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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 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中的常用函数回顾
2013/07/11 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
js实现开关灯效果
2020/03/30 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python中Django文件上传方法详解
2020/08/05 Python
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
工伤赔偿协议书范本
2014/04/15 职场文书
意向协议书范本
2014/04/23 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
房产公证书样本
2015/01/23 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
岗位聘任协议书
2015/09/21 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
MySQL存储过程及语法详解
2022/08/05 MySQL