spring mvc实现图片上传预览

最新推荐文章于 2020-11-29 06:54:11 发布
最新推荐文章于 2020-11-29 06:54:11 发布
阅读量197 收藏
点赞数
文章标签： java 测试 json
原文链接：https://my.oschina.net/mcyy568/blog/653774
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

pom.xml

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-core</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-aop</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-beans</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-tx</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-test</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-web</artifactId>
    <version>4.2.2.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.aspectj</groupId>
    <artifactId>aspectjweaver</artifactId>
    <version>1.8.7</version>
</dependency>
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>3.3.0</version>
</dependency>
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>1.2.3</version>
</dependency>
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
</dependency>
<dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>javax.servlet.jsp-api</artifactId>
    <version>2.3.2-b02</version>
</dependency>

<!-- jstl -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>

<!-- spring后台通过@RequestBody注解自动转json对象 -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.5.4</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.5.4</version>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.6</version>
</dependency>
<dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.9.2</version>
</dependency>
<dependency>
    <groupId>commons-collections</groupId>
    <artifactId>commons-collections</artifactId>
    <version>3.2.2</version>
</dependency>
<dependency>
    <groupId>commons-lang</groupId>
    <artifactId>commons-lang</artifactId>
    <version>2.6</version>
</dependency>

<dependency>
    <groupId>commons-codec</groupId>
    <artifactId>commons-codec</artifactId>
    <version>1.10</version>
</dependency>
<dependency>
    <groupId>commons-httpclient</groupId>
    <artifactId>commons-httpclient</artifactId>
    <version>3.1</version>
</dependency>


<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.4</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.1</version>
</dependency>

index.jsp 

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/cropper/cropper.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/sitelogo/sitelogo.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/cropper/cropper.min.js"></script>
    <script src="${pageContext.request.contextPath}/sitelogo/sitelogo.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="ibox-content">
    <div class="row">
        <div id="crop-avatar" class="col-md-6">
            <div class="avatar-view" title="测试图片上传">
                <img src="" alt="预览图片" id="images">
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="avatar-form" action="upload" enctype="multipart/form-data" method="post">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <label for="avatarInput">图片上传</label>
                            <input class="avatar-input" id="avatarInput" name="avatar_file" type="file"></div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg"></div>
                                <div class="avatar-preview preview-md"></div>
                                <div class="avatar-preview preview-sm"></div>
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-9"></div>
                            <div class="col-md-3">
                                <button class="btn btn-success btn-block avatar-save" type="submit"><i class="fa fa-save"></i> 保存修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>


</body>
</html>

TestController 

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.it.utils.OperateImage;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/")
public class TestController {

    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public String index(ModelMap model) throws Exception {
        return "index";
    }


    @RequestMapping(value = "/upload")
    public @ResponseBody
    Map upload(@RequestParam MultipartFile avatar_file, HttpServletRequest request) {

        java.util.Random random = new java.util.Random();// 定义随机类
        int result = random.nextInt(1);

        String path = request.getSession().getServletContext().getRealPath("upload");
        String fileName = avatar_file.getOriginalFilename();
        File targetFile = new File(path, fileName);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }
        try {
            //保存文件
            avatar_file.transferTo(targetFile);

            //裁剪图片
            JSONObject object = JSON.parseObject(request.getParameter("avatar_data"));
            OperateImage o = new OperateImage((int) Float.parseFloat(object.get("x").toString()), (int) Float.parseFloat(object.get("y").toString()), (int) Float.parseFloat(object.get("width").toString()), (int) Float.parseFloat(object.get("height").toString()));
            o.setSrcpath(path+"/"+fileName);//输入图片地址
            o.setSubpath("D:\\"+result+".jpg");//输出图片地址
            o.cut();
        } catch (Exception e) {
            e.printStackTrace();
        }

        Map map = new HashMap();
        map.put("result", true);
        /*nginx地址*/
        map.put("message", "http://localhost:3333/"+result+".jpg");
        return map;
    }
}

OperateImage处理图片的工具类

import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Iterator;

import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;

public class OperateImage {

    // ===源图片路径名称如：c:\1.jpg
    private String srcpath;

    // ===剪切图片存放路径名称。如：c:\2.jpg
    private String subpath;

    public void setSrcpath(String srcpath) {
        this.srcpath = srcpath;
    }

    public void setSubpath(String subpath) {
        this.subpath = subpath;
    }

    // ===剪切点x坐标
    private int x;
    private int y;

    // ===剪切点宽度
    private int width;
    private int height;

    public OperateImage() {}

    public OperateImage(int x, int y, int width, int height) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
    }

    //对图片裁剪，并把裁剪完蛋新图片保存 。
    public void cut() throws IOException {
        FileInputStream is = null;
        ImageInputStream iis = null;
        try {
            // 读取图片文件
            is = new FileInputStream(srcpath);

            /**
             * 返回包含所有当前已注册 ImageReader 的 Iterator，这些 ImageReader
             * 声称能够解码指定格式。 参数：formatName - 包含非正式格式名称 .
             * (例如 "jpeg" 或 "tiff")等 。
             */
            Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName("jpg");
            ImageReader reader = it.next();

            // 获取图片流
            iis = ImageIO.createImageInputStream(is);

            /**
             * iis:读取源。true:只向前搜索 将它标记为 ‘只向前搜索’。
             * 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许 reader
             * 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。
             */
            reader.setInput(iis, true);

            /**
             * 描述如何对流进行解码的类 用于指定如何在输入时从 Java Image I/O
             * 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件
             * 将从其 ImageReader 实现的 getDefaultReadParam 方法中返回ImageReadParam 的实例。
             */
            ImageReadParam param = reader.getDefaultReadParam();

            //图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象的左上顶点的坐标(x，y)、宽度和高度可以定义这个区域。
            Rectangle rect = new Rectangle(x, y, width, height);

            // 提供一个 BufferedImage，将其用作解码像素数据的目标。
            param.setSourceRegion(rect);

            //使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象，并将它作为一个完整的 BufferedImage 返回。
            BufferedImage bi = reader.read(0, param);

            // 保存新图片
            ImageIO.write(bi, "jpg", new File(subpath));
        } finally {
            if (is != null){
                is.close();
            }
            if (iis != null){
                iis.close();
            }
        }
    }

    public static void main(String[] args) throws Exception {
        String name = "d:\\1.jpg";
        OperateImage o = new OperateImage(20, 20, 100, 100);
        o.setSrcpath(name);
        o.setSubpath("D:\\11.jpg");
        o.cut();
    }

}

sitelogo.js  需要修改的地方

运行效果


转载于:https://my.oschina.net/mcyy568/blog/653774

weixin_33720956
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringMVC预览上传图片功能的实现
住在城北的猫
05-03 2477
SpringMVC预览上传图片基于SSM（spring，springmvc，mybatis）开发项目已经成为一种趋势， 其中图片以及文件的上传又是在项目中必不可缺的功能，下面我们着重研究基于Spring MVC 自己提供的MultipartResolver功能实现图片的上传。
SpringMvc图片上传，预览，前后端Dome
qq_42724864的博客
07-23 551
前端显示 默认显示： <tr> <td width="60" align="right">头像预览:</td> <td valign="middle"> <img id="edit-preview-photo" src="../../../resources/admin/h-ui/images/headPic.jpg" widt
anguarjs 上传图片预览_SpringMVC批量上传图片，实现上传前图片预览
weixin_39831170的博客
11-29 80
最近有个功能需要实现批量上传图片，然后实现图片预览，因为项目比较老，同时对界面和用户操作体验也要求不太高，就没去找网上的开源插件，直接写了个简单的功能，这里做个记录备份因为这个是实验性的小代码，就没做太多的验证和界面调整可以实现乱序删除这就是简单的功能界面，下面就是代码首先是SpringMVC的xm需要配置下 JSP+js My JSP 'batch...
ie8 springmvc图片上传预览
yinyichao0107的专栏
01-07 1284
开始设想使用input file上传组件，使用js的FileReader进行图片的预览功能， function upload(){ $("#fileUP").click(); } function preview(){ var img = document.getElementById('fileXS'); img.width  =  155; img.height =  155
SpringMVC上传图片并预览
酒肉猿
08-01 3262
1.HTML代码<form id="logoform" enctype="multipart/form-data"> <img src="../media/images/upload.png" style="width:150px;height:150px;" id="showimg"/> <input type="file" name="file" id="image_input"/> </f
layui 图片上传+表单提交+ Spring MVC的实例
10-16
在本实例中，我们主要探讨了如何利用Layui库进行图片上传，同时结合表单提交和Spring MVC框架实现后端处理。Layui是一个轻量级的前端组件库，提供了丰富的UI组件，包括上传功能。以下是具体的知识点： 1. **Layui...
spring mvc uploadify上传文件
01-11
在本文中，我们将深入探讨如何...通过以上步骤，我们可以实现Spring MVC与uploadify的集成，从而在Web应用中提供友好的文件上传功能，特别适用于图片上传场景。这不仅简化了用户交互，还让后端处理文件变得更加方便。
spring MVC uploadify
01-18
// 处理上传成功后的逻辑，例如显示预览图片 } }); }); ``` 在后端，我们需要创建一个控制器方法来接收和处理文件上传请求。这个方法通常会接收一个`MultipartFile`参数，该参数是Spring MVC提供的，用于方便地...
多张图片上传的例子，MVC项目
07-05
在本文中，我们将深入探讨如何在ASP.NET MVC项目中实现多张图片的上传功能，同时利用uploadify控件创建缩略图。这个功能对于许多Web应用程序来说是至关重要的，特别是那些涉及用户上传个人资料图片、产品照片或者...
springmvc 接受图片
11-22
本工具类是为了让springmvc可以接受图片文件等内容.存放于服务器本地
springMVC文件上传demo（亲测有效）
03-15
springMVC文件上传完美 demo，自带 jar包， 前后台代码 ，表单上传，项目直接导入即可！
spring mvc html5带进度条上传的例子.zip
08-29
同时，Spring MVC的`CommonsMultipartResolver`可以帮助我们在服务器端处理文件上传，它将`MultipartFile`转换为可存储的文件。 在ECLIPSE MAVEN工程中，`pom.xml`文件定义了项目的依赖管理，包括Spring MVC、...
jsp+springmvc实现文件上传、图片上传和及时预览图片
weixin_34119545的博客
05-12 367
1、多文件上传：http://blog.csdn.net/a1314517love/article/details/24183273 2、单文件上传的简单示例：http://blog.csdn.net/cheung1021/article/details/7084673   3、springMVC+ajaxfileupload异步上传图片并及时预览 http://www.codeweblo...
springmvc图片上传、jquery 图片上传预览
三生万物
08-23 1478
宽为限 紧用功 功夫到 滞塞通 springmvc 图片上传预览功能，方案一：ajaxfileupload插件上传、方案二：URL.createObjectURL
SpringMVC整合KindEditor，实现图片上传、预览、删除
DataVault2.0大数据的未来
06-24 4839
之前我写过一篇关于《DWZ（JUI）整合Kindeditor应用于dialog弹出框》，只是讨论了前端的应用，并没有详细介绍后台代码实现。本文除了介绍后台的代码实现，还顺便介绍一些KindEditor的前端应用技巧。以前的是SSH框架实现KindEditor插件的上传、图片空间管理功能。现在的项目底层框架换成了springmvc，代码虽然变化不大，但是需要注意一些细节的实现。 具体后台实现：@Co
基于springmvc实现头像上传、预览
学无止境！
09-25 3662
在做javaweb项目时，有时偶尔会用到用户头像上传和预览功能，百度了很多资料，发现学习成本比较高，要么是理解起来有点困难，必须加以深入研究才能吃透，但花费时间花费精力。要么是效果不尽人意。因此本人花了一些时间从前台到后台都是自己手写的，希望大家能满意！ 头像上传即文件上传采用springmvc文件上传方案来解决，头像上传通常也需要预览功能，预览功能则通过js代码实现。 前端页面html代码：...
springMVC图片上传，单图片上传和多图片上传以及预览
小刘的博客
02-16 979
包含后端的图片上传 上图为单图片上传前台代码显示，以及预览，表单控件隐藏触发，既可假改变上传样式。下图为效果： 想要美观可替换你需要的图片或设计； 前端多图片上传预览代码 <tr> <td height...
【SpringMVC】电子相册系统——上传图片和浏览图片前后端实现
周周的奇妙代码之旅
02-21 2290
大三上期末的软件工程大作业，技术框架是SpringMVC+jsp，功能为用户登录注册、创建相册、相册操作、图片上传修改、留言评论等，前端框架用的是layui。数据库使用SQLServer（因为担心舍友安装mysql会比较麻烦，故选用了学习数据库课程都安装的SQLServer。但经过使用体验发现其实麻烦一样多，包括需要手动安装数据库驱动至Maven、没有LIMIT关键字等）。 包括精通 速成spr...
Spring MVC中文教程：深度解析开发指南
"Spring MVC中文教程" 这篇文档是Spring MVC的中文教程，由夏昕编写，旨在详细解释Spring MVC的开发技术。教程分为多个版本，其中V0.6是2004年9月2日发布的预览版，相较于之前的0.5版本，增加了关于“持久层”的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值