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代码编写需要注意的7个小细节小结
Sep 21 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
JS数组去重详情
Nov 07 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php实现登录页面的简单实例
2019/09/29 PHP
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python实现可变变量名方法详解
2019/07/01 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
英文版销售经理个人求职信
2013/11/20 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
高一物理教学反思
2014/01/24 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
房屋维修协议书范本
2014/09/25 职场文书
使用Python拟合函数曲线
2022/04/14 Python