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之ESC(第二类混淆)
May 06 Javascript
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
js操作数组函数实例小结
Dec 10 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
vue 如何使用递归组件
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
phpmyadmin的#1251问题
2006/11/25 PHP
php连接数据库代码应用分析
2011/05/29 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
清除js缓存的多种方法总结
2016/12/09 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
vue debug 二种方法
2018/09/16 Javascript
Python中的字符串查找操作方法总结
2016/06/27 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Numpy掩码式数组详解
2018/04/17 Python
python编写计算器功能
2019/10/25 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
毕业生自荐书模版
2014/01/04 职场文书
个人现实表现材料
2014/02/04 职场文书
设计师求职信
2014/07/01 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Python图像处理之图像拼接
2021/04/28 Python
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
Minikube搭建Kubernetes集群
2022/03/31 Servers
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS