在页面写一个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. leecode第二百三十八题(除自身以外数组的乘积)

    class Solution { public: vector<int> productExceptSelf(vector<int>& nums) { int len= ...

  2. 文献导读 | Single-Cell Sequencing of iPSC-Dopamine Neurons Reconstructs Disease Progression and Identifies HDAC4 as a Regulator of Parkinson Cell Phenotypes

    文献编号:19Mar - 11 2019年04月23日三读,会其精髓: 相信这种方法的话,那么它的精髓是什么,如何整合出这个core gene set. 首先要考虑样本的选择,样本里是否存在明显的分层 ...

  3. jmockit 模拟同一个函数多次调用每次返回不同结果

    new Expectations(){{ calendarService.getGeneralCalendar((Date)any); returns(null, new AbrahamResult& ...

  4. app在admin中显示成我们想要的中文名

    在django的开发中,很多时候我们希望app在admin中显示成我们想要的中文名,而不是显示默认的app_label名称. 比如我们有一个blog应用,在我们的blog app目录下面,默认会生成一 ...

  5. 在python3里面使用ueditor(基于adminx)

    第一步,下载ueditor,在git上下载 直接download : https://github.com/twz915/DjangoUeditor3/ 然后放到任何一个文件夹里面 配置setting ...

  6. 网盘资源分享:你不知道的JavaScript(上)

    链接:https://pan.baidu.com/s/1UEBetOr2Z94oEeu5VsQYXQ 提取码:etts 复制这段内容后打开百度网盘手机App,操作更方便哦

  7. 嵌入式Linux开发之uboot启动Linux整体流程分析

    嵌入式Linux开发之uboot启动Linux整体流程分析 Uboot全称Universal Boot Loader,一个遵循GPL协议的的开源项目,其作用是引导操作系统,支持引导linux.VxWo ...

  8. Gson反序列化Map,整型自动转换为浮点型

    一 坑 场景:将Map<String,Object>结果序列化后放入redis缓存,发现反序列化后Integer类型自动转换成了Double类型 二 测试重现 @Test public v ...

  9. Netty(一)——Netty入门程序

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7447618.html 有兴趣的可先了解下:4种I/O的对比与选型 主要内容包括: Netty开发环境的搭建 ...

  10. 浅谈C++的智能指针

    我们使用智能指针来自动运行管理内存,避免对原始指针的使用不当而造成内存泄漏. ------------------------------------------------------------- ...