bootstrapfileinput实现文件自动上传


Posted in Javascript onNovember 08, 2016

bootstrap fileinput文件上传插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用,

JS引用:

<script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script>
<link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" />
<script src="~/Scripts/lib/jquery.json.js"></script>

HTML:

<input id="fileUpload" type="file"  >

JS: 

//自动上传文件-JS
 function initFileInput(ctrlName, uploadUrl) {
 var control = $('#' + ctrlName);

 control.fileinput({
  language: 'zh', //设置语言
  uploadUrl: uploadUrl, //上传的地址 (该方法需返回JSON字符串)
  allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后缀
  showUpload: false, //是否显示上传按钮
  showCaption: true,//是否显示标题
  browseClass: "btn btn-primary", //按钮样式
  //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
  uploadExtraData: { ID: "123" }
 }).on('filebatchselected', function (event, data, id, index) {
  $(this).fileinput("upload");
 }).on("fileuploaded", function (event, data) {
  if (data.response) {
  
  //通过 data.response.Json对象属性 获得返回数据
  errors = data.response.ErrorList;
  }
 })
 }

//上传JS初始化
 $(function () {
 initFileInput("fileUpload", "Controllers/Action");
 });
//获取上传文件弹窗关闭动作
$("#fileUpload").change(function () { alert("上传文件弹窗已关闭") })

参考资料:bootstrap上传插件fileinput自动上传&成功回调

bootstrap上传插件fileinput功能非常强大,本文给出一例自动上传&上传成功回调的用例.核心就是调用 filebatchselected 文件选择完成事件实现的,文件上传成功的事件是 fileuploaded .
注意插件版本是 version 4.2.7 .

<script>
 $("#update_csv").fileinput({
 showUpload: false,
 language:'zh',
 uploadAsync:true,
 dropZoneEnabled:false,
 uploadUrl:'http://www.soyiyuan.com/',
 maxFileCount: 1,
 maxImageWidth: 600,
 resizeImage: false,
 showCaption: false,
 showPreview: false,
 browseClass: "btn btn-primary btn-lg",
 allowedFileExtensions : ['csv', 'txt'],
 previewFileIcon: ""
 }).on("filebatchselected", function(event, files) {
  $(this).fileinput("upload");
 })
 .on("fileuploaded", function(event, data) {
 if(data.response)
 {
  alert('处理成功');
 }
 });
</script>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 #Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 #Javascript
AngularJS压缩JS技巧分析
Nov 08 #Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 #Javascript
bootstrap fileinput完整实例分享
Nov 08 #Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 #Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 #Javascript
You might like
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python对excel文档去重及求和的实例
2018/04/18 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
python中remove函数的踩坑记录
2021/01/04 Python
Python中使用Selenium环境安装的方法步骤
2021/02/22 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
中科方德软件测试面试题
2016/04/21 面试题
外贸英语专业求职信范文
2013/12/25 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
店面出租协议书范本
2014/11/28 职场文书
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫