在页面写一个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. vue--js里跳转页面

    我们知道在vue里进行页面跳转的话,我们使用<router-link>这个标签 那在构造函数里我们不能直接操纵DOM元素,我们又该如何进行页面跳转呢? 步骤1: 我们先在DOM里设置三个按 ...

  2. 解决macOS因为它来自身份不明的开发者,不显示允许任何来源 –安装文件下载损坏问题

    打开时提示"已损坏,打不开.您应该将它移到废纸篓"或身份验证,因为它来自身份不明的开发者,和不显示允许任何来源,图片解锁和应用程序问题(如图片/application应用程序损坏, ...

  3. [转]osgconv工具简介

    osgconv是一种用来读取3D数据库以及对它们实施一些简单的操作的实用应用程序,同时也被称作 一种专用3D数据库工具. 用osgconv把其他格式的文件转换为OSG所支持的格式 osgconv是一种 ...

  4. DAY20 常用模块(三)

    一.加密模块 1.加密方式: 1.有解密的加密方式 2.无解密的加密方式,碰撞检查 1.不同数据加密后的结果一定不一致 2.相同数据的加密结果一定是一致 2.hashlib模块 1.基本使用 ciph ...

  5. Axure 矩形交互样式与单选按钮组设置

    矩形交互样式: 场景:当点击昵称的时候,密码栏会显示红框,当点击密码的时候,昵称会显示红框 补充:昵称栏和密码栏的组成其实是一个矩形框和一个文本框,这样才可以设置出场景所示的样式 这里的设置只是简单的 ...

  6. python爬取某站磁力链

    不同磁力链网站网页内容都不同,需要定制 1,并发爬取 并发爬取后,好像一会就被封了 import requests from lxml import etree import re from conc ...

  7. AEM上的一个图片转换工具

    目的: 不同情况下,同样一张图片,需要不一样大小/背景/尺寸显示. 例子: dam下面有一张940 x 300 的图片: http://localhost:4502/content/dam/geome ...

  8. MongoVUE的table view视图不显示列标题

    近来项目用到mongodb,遂装了个MongoVUE,当然是破解版的. 但是发现个小问题,就是table view视图下列标题文字标签不见了,Find的执行按钮也是空白一片: 开始以为破解的不彻底,重 ...

  9. DOM是什么?有什么用处?js与DOM啥关系?

    本文转载于:https://blog.csdn.net/u012155729/article/details/78135393 转载仅供自己后期学习 DOM简介大家都想知道dom是什么,翻了各种文档, ...

  10. 关于leal和mov

    最近在学习leal的时候遇到了一点非常迷惑的地方,就是leal是用来取有效地址的,但是为什么它也可以实现赋值呢?偶然发现一个博客讲的不错,遂自己记录一下 一个这样的例子 leal 7(%edx,%ed ...