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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
javascript模块化简单解析
Apr 07 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
javascript学习之json入门
Dec 22 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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
咖啡常见的种类
2021/03/03 新手入门
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
清空上传控件input file的值
2010/07/03 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python字符串格式化输出方法分析
2016/04/13 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python交易记录链的实现过程详解
2019/07/03 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
廉洁校园实施方案
2014/05/25 职场文书
2014年教师教学工作总结
2014/11/08 职场文书