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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
JavaScript实现动态增加文件域表单
Feb 12 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
Laravel5.1 框架Request请求操作常见用法实例分析
2020/01/04 PHP
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python数据爬下来保存的位置
2020/02/17 Python
Python可以实现栈的结构吗
2020/05/27 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Python使用Pygame绘制时钟
2020/11/29 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
空字符串(“”)和null的区别
2012/11/13 面试题
金融专业个人的自我评价
2013/10/18 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
小学教师自我鉴定
2013/11/07 职场文书
公证委托书大全
2014/04/04 职场文书
优秀教师演讲稿
2014/05/06 职场文书
单位活动策划方案
2014/08/17 职场文书
初婚未育证明样本
2014/10/24 职场文书
委托公证书样本
2015/01/23 职场文书
通用员工手册范本
2015/05/14 职场文书
飞屋环游记观后感
2015/06/08 职场文书
从事会计工作年限证明
2015/06/23 职场文书
2015年村级财务管理制度
2015/08/04 职场文书