当前位置:Gxlcms > JavaScript > bootstrapfileinput实现文件自动上传

bootstrapfileinput实现文件自动上传

时间:2021-07-01 10:21:17 帮助过:72人阅读

bootstrap fileinput文件上传插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用,

JS引用:

  1. <script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script>
  2. <link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" />
  3. <script src="~/Scripts/lib/jquery.json.js"></script>

HTML:

<input id="fileUpload" type="file"  >

JS: 

  1. //自动上传文件-JS
  2. function initFileInput(ctrlName, uploadUrl) {
  3. var control = $('#' + ctrlName);
  4. control.fileinput({
  5. language: 'zh', //设置语言
  6. uploadUrl: uploadUrl, //上传的地址 (该方法需返回JSON字符串)
  7. allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后缀
  8. showUpload: false, //是否显示上传按钮
  9. showCaption: true,//是否显示标题
  10. browseClass: "btn btn-primary", //按钮样式
  11. //previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
  12. uploadExtraData: { ID: "123" }
  13. }).on('filebatchselected', function (event, data, id, index) {
  14. $(this).fileinput("upload");
  15. }).on("fileuploaded", function (event, data) {
  16. if (data.response) {
  17. //通过 data.response.Json对象属性 获得返回数据
  18. errors = data.response.ErrorList;
  19. }
  20. })
  21. }
  22. //上传JS初始化
  23. $(function () {
  24. initFileInput("fileUpload", "Controllers/Action");
  25. });
  26. //获取上传文件弹窗关闭动作
  27. $("#fileUpload").change(function () { alert("上传文件弹窗已关闭") })

参考资料:bootstrap上传插件fileinput自动上传&成功回调

bootstrap上传插件fileinput功能非常强大,本文给出一例自动上传&上传成功回调的用例.核心就是调用 filebatchselected 文件选择完成事件实现的,文件上传成功的事件是 fileuploaded .
注意插件版本是 version 4.2.7 .

  1. <script>
  2. $("#update_csv").fileinput({
  3. showUpload: false,
  4. language:'zh',
  5. uploadAsync:true,
  6. dropZoneEnabled:false,
  7. uploadUrl:'http://www.soyiyuan.com/',
  8. maxFileCount: 1,
  9. maxImageWidth: 600,
  10. resizeImage: false,
  11. showCaption: false,
  12. showPreview: false,
  13. browseClass: "btn btn-primary btn-lg",
  14. allowedFileExtensions : ['csv', 'txt'],
  15. previewFileIcon: ""
  16. }).on("filebatchselected", function(event, files) {
  17. $(this).fileinput("upload");
  18. })
  19. .on("fileuploaded", function(event, data) {
  20. if(data.response)
  21. {
  22. alert('处理成功');
  23. }
  24. });
  25. </script>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行