bootstrap file input java,BootStrap-fileinput初识

一、简单聊聊

不知道大家的项目会不会用到这类的文件输入框，如果仅仅用系统自带的文件输入框，大概样式是这样的:

简单文件选择框.png

很不美观，如果和form表单结合起来的话，差不多是这样的：

文件选择框加提交按钮.png

没做什么div样式这类的调整，这么看上去会很不美观。这时候在逛github的时候，发现了一个好用的脚手架BootStrap-fileinput，他有很多种方法可以安装使用，由于我做的是java项目，写的是jsp页面，因此，我选择一种最简单直接的办法，先把github上面项目下载下来，然后把里面的js和css文件夹给拷贝到项目当中。

二、实际运用

1.准备阶段

把github上面的项目的js和css内容拷贝下来是这样，图中红色标记的就是项目当中的js和css内容，大家可以看到我的css和js当中还有bootstrap.css和jquery.js，因为这个脚手架是依托于BootStrap框架的，因此一般BootStrap框架需要什么就需要添加什么css。(ps:图中css部分font-awesonme.min.css是我框多了的部分，那个是一个font字体和图片素材库,跟本文提到的脚手架是无关联的。)

准备阶段.png

2.简单使用

把css和js放好以后，看你哪个页面需要用到BootStrap-fileinput,就需要在那个页面添加对应的导入。(link和script),可以看到bootstrap.css的导入要在fileinput之前，jquery.js的导入要在fileinput等js之前。

导入.png大家可以看到红线部分我直接用了cdn导入，这样做的目的其实是为了给前端页面的一些i样式做铺垫,仅仅只用自己从网上搞下来的bootstrap.css代码的话会出现下面这种情况：

result.png原因是因为自己弄下来的bootstrap.css中有写路径是直接使用“../fonts/...”这类导入的，如:

解决办法有两种，

一种就是直接用cdn去导入BootStrap.css这样就不会缺失样式部分；

另一种就是自己到网上去把对应的fonts样式下下来，这样就不会缺失样式了。

仅仅只是使用一下他提供的input-file的话，很简单：

前端代码：

前端.png效果图：

效果图1.png

效果图2.png

效果图3.png

点击一下upload的话就可以上传，不过需要设置好对应的uploadUrl，在js部分的fileinput()函数中进行设置。

当然如果你觉得这些英文不适合你的开发环境的话，也可以在fileinput初始化的时候去进行设置，具体对应的设置都可以在对应的API文档里面找到，我只举个例子:

前端.png效果:

效果1.png

效果2.png

详细预览.png

需要改动什么到API中查找对应的东西进行修改，这些都是属性修改，复杂一点的诸如ajax等等也是可以借助API文档进行开发。这里就不多深入了。

放一个中文的API文档地址(不完整):https://segmentfault.com/a/1190000018477200

完整的API文档：https://plugins.krajee.com/file-input可以借助谷歌浏览器的翻译插件来进行查看。

补充说明：piexif.js、purify.js、sortable.js是有选择性的导入的。

piexif.js 在需要使用bootstrap-fileinput插件的图像调整大小功能时才需要把这个js导入。

sortable.js 在要对初始预览中对缩略图进行排序时才需要把这个js导入。

purify.js 为HTML内容预览净化HTML时才需要把这个js导入。

三、完整的代码：

Document

$(function () {

$("#upload_file").fileinput({

language: 'zh', //设置语言

dropZoneTitle: '可以将图片拖放到这里 …支持多文件上传',

uploadLabel:'上传', //upload按钮的名称

removeLabel:'清除', //remove按钮的名称

browseLabel:'选择文件',//browse按钮的名称

msgZoomModalHeading:"详细预览",

showPreview: true,//显示预览区域

maxFileSize: 102480,

})

})

拷贝就能用，当然如果是写在jsp页面里面，jsp和js和css放在了web-app根目录下的话也是可以使用，但是如果jsp放在了WEB-INF目录下的话还需要做一些调整就需要借助来访问根目录再进行路径导入了。

image.png差不多是下面这段代码

有任何问题可以再评论区提出了，我看到会及时回复大家的。

原创作品，转载请注明出处