bootstrapfileinput实现文件自动上传
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实战教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Bootstrap Fileinput文件上传组件用法详解
- JS文件上传神器bootstrap fileinput详解
- Bootstrap fileinput文件上传预览插件使用详解
- Bootstrap中的fileinput 多图片上传及编辑功能
- Bootstrap的fileinput插件实现多文件上传的方法
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)
- 详解bootstrap-fileinput文件上传控件的亲身实践
- Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
- BootStrap fileinput.js文件上传组件实例代码
- Bootstrap FileInput实现图片上传功能
相关文章
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:20
有时候需要在客户端获取操作系统的版本,以便更好的给用户合适的信息,提高用户体验,好不容易从网站发现了这段代码,分享给大家。2011-10-10本地Bootstrap文件字体图标引入却无法显示问题的解决方法
这篇文章主要为大家详细介绍了本地Bootstrap文件字体图标引入却无法显示问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-12-12微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
这篇文章主要介绍了微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖),需要的朋友可以参考下2019-09-09js promise 中使用 setTimeout 实现暂停执行的效果
这篇文章主要介绍了js promise 中使用 setTimeout 实现暂停执行的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
最新评论