在页面写一个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多图片上传的更多相关文章

  1. Spring Boot+BootStrap fileInput 多图片上传

    一.依赖文件 <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/c ...

  2. bootstrap fileinput +springmvc图片上传-krajee

    引入的文件 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/filei ...

  3. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  4. Bootstrap FileInput 多图上传插件 文档属性说明

    Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

  5. Bootstrap fileinput:文件上传插件的基础用法

    官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...

  6. bootstrap fileinput控件上传文件大小限制

    部分js: language: "zh",//设置语言 showCaption: true,//是否显示标题 showUpload: true, //是否显示上传按钮 showPr ...

  7. bootstrap fileinput实现限制图片上传数量及如何控制分批多次上传

    废话没有,直奔主题 问题点: fileinput提供了一个maxFileCount用于限制图片上传的数量,设置maxFileCount为1时,一次性选择超过一张会有如下提示: 当选择一张,不点上传,再 ...

  8. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  9. 包含修改字体,图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

  10. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

随机推荐

  1. CSS--block inline inline-block

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  2. Win10外包公司(长年承接Win10App外包、Win10通用应用外包)

    在几天前的WinHEC大会中,微软特意在大会中展示了其对通用应用的称呼规范,现在,适用于Windows通用平台的应用的正式名称为“Windows应用”(Windows apps),简洁明了. 总而言之 ...

  3. legend2---项目总结(legend2的意义)

    legend2---项目总结(legend2的意义) 一.总结 一句话总结:总体来说还是化腐朽为神奇的,之前投了很多精力在学习上面,学的内容非常多,但是都记不住,尤其是英语,感悟也是没办法继续深悟,这 ...

  4. jmeter实践之数据库参数传递

    一.需求: 1.业务需求:根据手机号到数据库中查看用户id,再根据用户id查看该注册用户下关联的健康成员. 2.参数化分析 1)需要根据不同的手机号进行查询,所以手机号需要进行参数化 2)用户id要作 ...

  5. 保密数据!泽宝曝光各个主要店铺收入 核心SKU数量少得惊人

    今年跨境电商圈的一大并购,上市公司星徽精密并购知名跨境电商大卖家泽宝股份正在进程中.星徽精密在向证监会行政许可项目审查回复中,披露了泽宝股份众多保密数据,揭开了泽宝股份众多经营关键点,值得跨境电商卖家 ...

  6. 8.1 GOF 设计模式:关于设计模式

    关于设计模式…Design Pattern  追求永恒的美1.1 “模式”一词的起源 “每个模式描述了: 一个在我们周围反复出现的问题, 然后是针对这个问题的解决方案. 这样,其他人可以无数次地反复 ...

  7. java 形式参数和实际参数的区别

    1.形参不能离开方法.形参只有在方法内才会发生作用,也只有在方法中使用,不会在方法外可见.而实参可以再程序的任何地方都使用.

  8. git操作大全

    分支克隆 1. git clone [git路径] #克隆仓库代码 2. git clone [Git路径] -b [分支name] #克隆仓库下某分支代码 查看分支 1.git branch #查看 ...

  9. 【lintcode】 二分法总结 I

     二分法:通过O(1)的时间,把规模为n的问题变为n/2.T(n) = T(n/2) + O(1) = O(logn). 基本操作:把长度为n的数组,分成前区间和后区间.设置start和end下标.i ...

  10. HTTP Basic和Digest认证介绍与计算

    一.说明 web用户认证,最开始是get提交+把用户名密码存放在客户端的cookie中的形式:在意识到这样不安全之后逐渐演变成了post提交+把用户凭证放到了服务端的session中的形式(当然ses ...