使用BootStrap Inputfile 遇到的问题


前言:项目开发完成需要一个文件上传的功能,使用普通的“type=file”很快就完成了,趁着时间还充裕尝试使用界面美观,功能强大的Bootstrap Inputfile插件完成,由于很久没写前段的代码,期间踩过挺多坑,终于实现使用Bootstrap Inputfile 插件异步上传多个文件。


bootstrap input file 多文件上传:
在input中不加入multiple属性时,将会是单文件上传。
使用BootStrap Inputfile 遇到的问题_第1张图片
当在input元素中加入multiple属性时,将会实现多文件上传:
使用BootStrap Inputfile 遇到的问题_第2张图片


  • 官方文档直接使用“multiple”并没有给其赋值,但是我使用的是idea开发平台,运行程序时直接报错:
    查看官方实例(http://plugins.krajee.com/file-basic-usage-demo),官方的例子中直接使用multiple,并没有为其赋值。
    使用BootStrap Inputfile 遇到的问题_第3张图片
    idea上程序运行报错:
    使用BootStrap Inputfile 遇到的问题_第4张图片

在w3cshool(http://www.w3school.com.cn/tags/att_input_multiple.asp)查到解决方案,还是前段代码敲太少的缘故。
使用BootStrap Inputfile 遇到的问题_第5张图片


中文不显示的问题:
显示中文要引入zh.min.js包,运行程序:
使用BootStrap Inputfile 遇到的问题_第6张图片
出错原因:没有和另外两个包的版本匹配:

解决办法:上面三个包使用的版本要一致。


  • 没有引入jquery包报错:无法正常显示页面:

使用BootStrap Inputfile 遇到的问题_第7张图片


  • 没引入bootstrap.min.js包报错:
    使用BootStrap Inputfile 遇到的问题_第8张图片
    不使用放大文件的话,不会报错,当点击放大文件的图标将会产生如上的错误。引入bootstra.min.js可解决。

  • jquery.min.js引入在bootstrap.min.js之后报错:

    使用BootStrap Inputfile 遇到的问题_第9张图片

你可能感兴趣的:(学习)