bootstrap-fileinput多图片上传
在页面写一个input框:
<input id="subGraphAddress1" name="subGraphAddress" type="file" accept="image/jpg,image/png,image/gif,image/jpeg" />
页面导入的css和js文件:
<link href="/static/assets/bootstrap-fileinput-4.4.8/css/fileinput.min.css" rel="stylesheet" />
<link href="/static/assets/bootstrap-fileinput-4.4.8/css/fileinput-rtl.min.css" rel="stylesheet" />
<script src="/static/assets/bootstrap-fileinput-4.4.8/js/fileinput.min.js"></script>
<script src="/static/assets/bootstrap-fileinput-4.4.8/js/zh.js"></script>
javascript代码写在body外面:
<script th:inline="javascript">
/*图片上传 */
$("#subGraphAddress1")
.fileinput({
theme : 'fa',
dropZoneTitle : "请上传小于5M的图片!",
uploadUrl : "saveAddress",
language : "zh",
autoReplace : true,
showCaption : false,
showUpload : true,
overwriteInitial : true,
uploadAsync : true,
showUploadedThumbs : true,
maxFileCount : 5,
minFileCount : 1,
initialPreviewShowDelete : false,
showRemove : false,
showClose : false,
autoReplace : true,
overwriteInitial : true,
layoutTemplates : {
actionDelete:'', //去掉图片的删除按钮
actionUpload: '',
},
previewSettings : {
image : {
width : "100%",
height : "100%"
},
}
}) </script>
图片上传到ftp服务器的后台java代码:
public ModelMap saveSubAddress(@RequestParam("subGraphAddress") MultipartFile subGraphAddress,
HttpServletRequest request, HttpServletResponse response) {
ModelMap map = new ModelMap();
// 主图的项目路径
String paFileName = subGraphAddress.getOriginalFilename();
try {
FtpUtil ftpUtil = new FtpUtil();
FTPClient ftp = ftpUtil.getConnectionFTP(UploadFileUrlUtil.HOST_NAEM, UploadFileUrlUtil.PORT,
UploadFileUrlUtil.USER_NAME, UploadFileUrlUtil.PASSWORD);
filename = FtpUtil.getFileName(subGraphAddress);
boolean bool = ftpUtil.uploadFile(ftp, UploadFileUrlUtil.GetPath(UploadFileUrlUtil.BIG_PATH), filename,
subGraphAddress.getInputStream());
if (bool) {
url = UploadFileUrlUtil.GetPath(UploadFileUrlUtil.BIG_PATH) + filename;
map.put("subGraphAddress", url);
map.put("viceGraphName", filename);
System.out.println("上传成功!");
boolean boolClose = ftpUtil.closeFTP(ftp);
if (boolClose) {
System.out.println("关闭ftp连接成功!");
} else {
System.out.println("关闭ftp连接失败!");
}
} else {
System.out.println("上传失败!");
}
} catch (Exception e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
return ReturnUtil.Success("加载成功", map, null);
}
远程服务器的配置信息:
public class UploadFileUrlUtil {
// 远程服务器的配置信息
public final static String HOST_NAEM="127.0.0.1";
public final static Integer PORT=21;
public final static String USER_NAME="123456"; //ftpuser
public final static String PASSWORD="123456";
public final static int LOCALHOST= 8080;
public final static String BIG_PATH="/upload/picture/big/"; //主图路径
public final static String SMALL_PATH="/upload/picture/small/"; //副图的路径
public final static String VIDEO_PATH="/upload/picture/video/"; //视频的路径
public final static String HOST= "http://192.168.0.140:8080";// 上传的端口
public static String GetPath(String path) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String date=sdf.format(new Date());
return path+date+"/";
}
}
图片上传的js文件下载链接: https://pan.baidu.com/s/1zwfJB00oKplfZIImLN6BWw 密码: atb6
bootstrap-fileinput多图片上传的更多相关文章
- Spring Boot+BootStrap fileInput 多图片上传
一.依赖文件 <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/c ...
- bootstrap fileinput +springmvc图片上传-krajee
引入的文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/filei ...
- BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
- Bootstrap FileInput 多图上传插件 文档属性说明
Bootstrap FileInput 多图上传插件 原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...
- Bootstrap fileinput:文件上传插件的基础用法
官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...
- bootstrap fileinput控件上传文件大小限制
部分js: language: "zh",//设置语言 showCaption: true,//是否显示标题 showUpload: true, //是否显示上传按钮 showPr ...
- bootstrap fileinput实现限制图片上传数量及如何控制分批多次上传
废话没有,直奔主题 问题点: fileinput提供了一个maxFileCount用于限制图片上传的数量,设置maxFileCount为1时,一次性选择超过一张会有如下提示: 当选择一张,不点上传,再 ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- 包含修改字体,图片上传等功能的文本输入框-Bootstrap
通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
随机推荐
- P2170 选学霸
传送门 思路: ① 可以把每个学生都看作点,而那些实力相同的学生就处在同一个连通块内,因为连通块内的同学要么都取,要么不取,所以可以将连通块缩成一个点.只需用并查集维护每个连通块的大小. ② 接着采取 ...
- Kotlin 扩展
Kotlin 可以对一个类的属性和方法进行扩展,且不需要继承或使用 Decorator 模式. 扩展是一种静态行为,对被扩展的类代码本身不会造成任何影响. 扩展函数 扩展函数可以在已有类中添加新的方法 ...
- 分布式消息通信Kafka-原理分析
本文目标 TopicPartition 消息分发策略 消息消费原理 消息的存储策略 Partition 副本机制 1 关于 Topic 和 Partition 1.1 Topic 在 kafka 中, ...
- wine安装稳定使用falsh播放器
1安装wine,wine安装使用网上自行查找 2.安装flash播放器.exe 下载附件的falsh播放相关.tar.gz,解压后得到 Flash.ocx (flash10 for windows的插 ...
- Asp.net core 学习笔记 Razor Page
更新 2019-04-27 最近做了更多的 research 发现微软视乎有意发展 razor page. razor page 的定位是 mvvm, 现在还有个叫 blazor 的东西, 类似用 c ...
- Python自学:第三章 根据值删除元素
motorcycles = ["honda", "yamaha", "suzuki", "ducati"] print( ...
- ArcSDE10.1配置Oracle 监听器来使用SQL操作ST_Geometry(个人改动版)
发了两天的时间来解决配置Oracle 监听器来使用SQL操作ST_Geometry的配置,网上搜索一大片,结果真正找到的只有方法可用,下面把这个方法我个人在总结下. ArcSDE10.1配置Oracl ...
- FreeMarker与Thymeleaf
FreeMarker 是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯 Java 编写,FreeMarker 被设计用来生成 HTML Web 页面,特别是基于 MVC 模式的应用程序,虽然 ...
- 从零开始学Python 二
上一章我们已经安装好了Python环境,并且写出了第一个Python程序.下面我们接着继续学习.首先,来分析下上一章我们写的代码. 我们最初的目的是为了可以输出一串有意义的文字,最终选择了英文语句“h ...
- AS3.0 给addEventListener里的方法加上参数传递
方法一:for(var i:int=1;i<=4;i++){this["btn"+i].addEventListener(MouseEvent.CLICK,EventUp(b ...