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的一个简单的鼠标跟随提示效果
Sep 23 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
jquery操作select方法汇总
Feb 05 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
jQuery异步提交表单实例
May 30 jQuery
JavaScript实现修改伪类样式
Nov 27 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python中for循环控制语句用法实例
2015/06/02 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
盛大二次面试题
2016/11/18 面试题
人力资源作业细则
2014/03/03 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
win10更新失败无限重启解决方法
2022/04/19 数码科技