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实现打开本地文件或文件夹
Mar 09 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
JS实现放烟花效果
2020/03/10 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python实现FM算法解析
2019/06/18 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
pandas分批读取大数据集教程
2020/06/06 Python
python如何绘制疫情图
2020/09/16 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
个人授权委托书
2014/04/03 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
自我评价优缺点范文
2015/03/11 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers