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差不多是下面这段代码
有任何问题可以再评论区提出了,我看到会及时回复大家的。
原创作品,转载请注明出处
bootstrap file input java,BootStrap-fileinput初识相关推荐
- Bootstrap File Input 真正 解决跨域问题
今天一个项目需要 做文件上传 ,图方便 就使用了Bootstrap File Input 插件 问题来了 文件放置服务器和 活动服务器 是分开的 于是涉及到了 一个ajax 跨域请求问题 后端使 ...
- Bootstrap File Input,最好用的文件上传组件
本篇介绍如何使用 Bootstrap File Input(最好用的文件上传组件)来进行图片的展示.上传,以及如何在服务器端进行文件保存. 一.先来看效果图吧 二.引入插件的样式和脚本 <lin ...
- bootstrap File Input 多文件上传插件使用记录(二)删除原文件
在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...
- 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- (转)基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用...
http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...
- Bootstrap文件上传插件File Input的使用
1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http://plugin ...
- [Java in NetBeans] Lesson 17. File Input/Output.
这个课程的参考视频和图片来自youtube. 主要学到的知识点有: We want to handle the bad Error. (e.g bad input / bugs in program) ...
- java毕业设计——基于Java+Bootstrap+Mysql的电影评论网站设计与实现(毕业论文+程序源码)——电影评论网站
基于Java+Bootstrap+Mysql的电影评论网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于Java+Bootstrap+Mysql的电影评论网站设计与实现,文章末尾附有本毕 ...
- JAVA bootstrap
简介 Bootstrap,基于HTML.cSS.JAVASCRIPT的前端框架. 该框架已经预定义了一套CSS样式和与样式对应的JS代码.(对应的样式有对应的特效). 开发人员只需要编写HTML结构, ...
最新文章
- linux 7 vsftpd 配置,CentOS7 安装并配置使用vsftpd
- Android官方技术文档翻译——Ant 任务
- 肢解“文件夹图标”病毒,制作专杀工具——“郑大扫帚”
- Spring Cloud Config 配置中心
- SAE取消每日免费云豆赠送机制
- 计算机二级C语言辅导j机构,全国计算机二级C语言公基础知识辅导.pptx
- word文字中带有数学公式的行间距设置
- YbtOJ#893-带权的图【高斯消元,结论】
- ROS小白——软件安装(1)
- WC3L联赛结束了!!!
- kettle将excel导入数据库_Kettle从excel导入数据到sql server
- 企企通SRM:时尚服装品牌企业建立优质供应链体系,只需要做到这几步
- 2021-05-19 C语言逻辑取反! 学习
- 【流媒体开发】6、ffplay命令
- 雷塞控制器SMC304简单介绍
- 触发器详解——(一)D触发器
- python终端会话是指什么_进程组、会话、控制终端的概念及程序
- stl文件怎么用Java读取_vtk对stl文件进行下采样
- VMware虚拟机装系统提示Units specified dont exist!
- 实操| 前端新人无敲代码开发APP