bootstrap fileinput文件上传插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用,
JS引用:
<script type="text/javascript" src="/UploadFiles/2021-04-02/fileinput.min.js">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实战教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】