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和 ... 
随机推荐
- echarts 角度渐变环形图心得
			今天做了一个图,把自己的遇到的问题和体会记录一下,以防忘记 echarts地址 https://gallery.echartsjs.com/editor.html?c=xEPtLLmG4G 参考官网地 ... 
- C#实现基于ffmpeg加虹软的人脸识别demo及开发分享
			对开发库的C#封装,屏蔽使用细节,可以快速安全的调用人脸识别相关API.具体见github地址.新增对.NET Core的支持,在Linux(Ubuntu下)测试通过.具体的使用例子和Demo详解,参 ... 
- 虹软离线人脸识别 ArcFace 2.0 Demo [C++]
			环境: win10(10.0.16299.0)+ VS2017 sdk版本:ArcFace v2.0 OPENCV3.43版本 x64平台Debug.Release配置都已通过编译 下载地址:http ... 
- js斐波那契数列
			斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...... 这个数列从第3项开始,每一项都等于前两项之和. 1.递归算法: function ... 
- 【转载】BlockingQueue
			前言: 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大的便 ... 
- Asp.Net Boilerplate Project 使用swagger调试api
			文件有点大,去掉了packages文件夹,(Swashbuckle.Core.5.6.0) 链接:https://pan.baidu.com/s/1DzMLhFyRav0dufS4dTeMzg 提取码 ... 
- channels 2.x的使用
			转载:https://www.vimiix.com/post/2018/07/26/channels2-tutorial/ 认识 Channels 之前,需要先了解一下 asgi ,全名:Asynch ... 
- 使用cookie保存用户名和密码
			效果图如下 从数据库中随意使用一个账号登录 登陆成功来到人中心 返回登录界面 实现代码如下 package com.test.controller; import java.io.IOExceptio ... 
- 跟我一步一步写出MongoDB Web 可视化工具(二)
			前言 上篇讲了一些基础,主要注重的是查,包括建立数据库链接.获取数据库.获取表.列出数据库.列出表.列出索引.获取数据等. 本篇依然是基础,注重增改删,废话不多说,咱们开始. 进阶 创建一个数据库和一 ... 
- aggregate基础 使用记录
			mongoDB中聚合(aggregate)的具体使用 我们可以用$指定字段来表示选定的document的field,另外可以使用$$ROOT来表示选定的document的所有内容(例如:chosenD ... 
