关闭

SpringMVC预览上传图片功能的实现

标签: spring mvc图片上传
482人阅读 评论(0) 收藏 举报
分类:

SpringMVC预览上传图片

基于SSM(spring,springmvc,mybatis)开发项目已经成为一种趋势, 其中图片以及文件的上传又是在项目中必不可缺的功能,下面我们着重研究基于Spring MVC 自己提供的MultipartResolver功能实现图片的上传。

项目结构:
这里写图片描述

  1. 编写jsp 页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加</title>
<script type="text/javascript" src="resource/back/js/upload.js"></script>
</head>
<body>
    <div align="center">
        <form action="addItems.action" method="post" enctype="multipart/form-data">
    姓名:<input type="text" id="name " name="name"> <br> 
    价格:<input type="text" id="price " name="price"><br>
    详情:<input type="text" id="detail " name="detail"><br>  添加日期:<input type="text" id="date " name="date"><br> 
    图片:<input type="file" id="pic " name="file"
    onchange="previewImage(this,'imgPreviewId')"><br> 
    <img alt="" src="" id="imgPreviewId" width="150px;" height="150px;"><br> 
    <input type="submit">
        </form>
    </div>
</body>
</html>

依然引入upload.js实现图片上传时的预览,因为项目基于SSM编写,所以所有的添加页面位于WEB-INF下,而此目录下的内容又是受保护的,所以直接在此目录下新建js文件夹添加upload.js是有问题的,问题在于你在jsp页面如何找到此路径,故而,在WebContext目录下建立resource将upload.js置于此目录下,如下图:
这里写图片描述
这样在jsp页面使用一下语句就可以引用到此js,从而实现预览功能:

<script type="text/javascript" src="resource/back/js/upload.js"></script>

切记一定要将form表单的enctype设置为”multipart/form-data”类型,此处虽没有什么技术含量,但是往往有人忘记设置导致出现许多不必要的麻烦。

2.. 定义id为multipartResolver 的bean,在springmvc.xml文件中:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
    <!-- 自动扫描 -->
    <context:component-scan base-package="cn.com.mp"></context:component-scan>
    <!--配置适配器,映射器 -->
    <mvc:annotation-driven></mvc:annotation-driven>
    <!--配置视图解析器 -->
    <bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>

    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--此处可以添加的属性有 :
        defaultEncoding:设置默认编码
        maxUploadSize:最大的上传文件大小
        uploadTempDir:上传文件的临时路劲
        等等
         -->
        <property name="defaultEncoding" value="utf-8" />
    </bean>
</beans>

其中multipartResolver的属性可以根据开发需要添加不同功能的属性

3.. 编写controller类

@RequestMapping("addItems.action")
    public ModelAndView add(@RequestParam(value = "file", required = false) MultipartFile file, Items items) {
        ModelAndView modelAndView = new ModelAndView();
        if (!file.isEmpty()) {
            try {
                DateFormat format = new SimpleDateFormat("yyyyMMddHHmmss");
                String formatDate = format.format(new Date());
                int random = new Random().nextInt(10000);
                String originName = file.getOriginalFilename();
                String extension = originName.substring(originName.lastIndexOf("."));
                String newName = formatDate + random + extension;

                // 文件保存路径
                String filePath = request.getSession().getServletContext().getRealPath("/") + "image/" + formatDate
                        + random + newName;
                // 转存文件
                file.transferTo(new File(filePath));
                items.setPic(newName);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        int result = service.add(items);
        if (result > 0) {
            modelAndView.addObject("addtip", "添加成功");
        } else {
            modelAndView.addObject("addtip", "添加失败");
        }

        modelAndView.setViewName("/back/ItemTip");

        return modelAndView;
    }
  • 其中add方法中使用注解@RequestParam(value = “file”, required = false),并且建议写required = false,也可不写
  • MultipartFile file的 参数变量需与form表单中 type=“file”的input的name保持一致,且一般就写为file

核心思想:若得到的file不为空,则证明上传了图片,此时需要得到原图片后缀,然后和其生成的扩展名称一起组成新的存储路径,最后上传图片,别忘了为model设置新的名称,这样图片将上传成功,同时以新的名称保存在数据库中

5..测试界面:
这里写图片描述

6.. 测试结果:
这里写图片描述

即数据库中成功保存到名称为201705031624457316.jpg的图片,因此在upload目录下找该名称的图片:
这里写图片描述
的确存在这样一张图片,由此说明我们图片上传功能已经完成。

总结

springmvc自带的MultipartResolver 功能,对与图片的上传着实让开发者方便了许多,同时其上传速度也较流上传文件的方式快好多好多,因此还是推荐大家使用springmvc的MultipartResolver 上传图片文件等。
更多springMVC MultipartResolver 的功能参见:springmvc MultipartResolver

完整项目下载:springmvc图片上传

期待您更多指教!

0
0
查看评论

springmvc-带预览的异步上传图片功能

springmvc配合小插件 上传有缩略图 的图片等文件
  • nich002
  • nich002
  • 2015-07-29 15:51
  • 4988

SpringMVC上传图片并预览

1.HTML代码<form id="logoform" enctype="multipart/form-data"> <img src="../media/images/upload.png" style="w...
  • z834410038
  • z834410038
  • 2017-08-01 09:02
  • 259

struts2+jsp+jquery+Jcrop实现图片裁剪并上传

struts2+jsp+jquery+Jcrop实现图片裁剪并上传 -----------------------------------------------------------------------------------------------------------------...
  • hsany330
  • hsany330
  • 2015-05-27 00:07
  • 996

java web 实现图片上传前的预览

要实现图片预览,我们必须限定上传的文件是图片文件。这个限制在上一篇有。如有不明白的,可以去看看。 实现预览我们可以用:jquery的相关功能实现。 1.在工程中加入JQuery的包。 2.在jsp页面引入Jquery。 3.用代码实现预览功能。 需要我们编写的代码如下: $(functi...
  • cs19920
  • cs19920
  • 2013-12-23 13:36
  • 2205

springmvc+easyui+fileupload实现图片上传

添加依赖关系由于本项目是在maven项目管理工具下开发的,所以需要在pom.xml文件里添加如下依赖关系 <dependency> <groupId>commons-fileupload</groupId> <artifactId>co...
  • u014656173
  • u014656173
  • 2016-12-26 22:30
  • 1353

SpringMVC批量上传图片,实现上传前图片预览

最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份因为这个是实验性的小代码,就没做太多的验证和界面调整可以实现乱序删除这就是简单的功能界面,下面就是代码首先是SpringMVC的xm...
  • Harry_ZH_Wang
  • Harry_ZH_Wang
  • 2017-07-16 23:32
  • 719

html5预览并上传图片的功能

如何使用html5 fileReader来上传图片呢?
  • shi_yi_fei
  • shi_yi_fei
  • 2017-07-28 19:38
  • 588

web前端——实现上传图片预览功能

如图所示,上传图片是要有预览功能,本博讲述了这个预览功能的实现 HTML: 选择文件 CSS: .file { position: relative; display: inline-block; background: #D0EEFF; bo...
  • yanglipinghh
  • yanglipinghh
  • 2016-07-13 14:44
  • 869

SpringMVC图片文件上传功能实现

1. 在工程依赖库下添加文件上传jar包 commons-fileupload-1.2.2.jar commons-io-2.4.jar 2.jsp页面设置form表单属性enctype 在表单中上传图片时,需要在form的属性设置中添加enctype="multipart/for...
  • kxx535943581
  • kxx535943581
  • 2015-08-25 12:19
  • 7508

Java上传图片并预览

需求,上传图片,并可以预览,需要强调的是必须选择的为图片,不然wuf
  • r0a0n0
  • r0a0n0
  • 2014-07-10 16:02
  • 4936
    个人资料
    • 访问:5488次
    • 积分:213
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类