实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。

开始需要在pom.xml加入几个jar,分别是：

  1. <dependency>
  2. <groupId>commons-fileupload</groupId>
  3. <artifactId>commons-fileupload</artifactId>
  4. <version>1.3.1</version>
  5. </dependency>
  6. <dependency>
  7. <groupId>commons-io</groupId>
  8. <artifactId>commons-io</artifactId>
  9. <version>2.4</version>
  10. </dependency>

接下来，在Springmvc的配置加入上传文件的配置（PS：我把springmvc的完整配置都展现出来）：

  1. <!--默认的mvc注解映射的支持 -->
  2. <mvc:annotation-driven/>
  3. <!-- 处理对静态资源的请求 -->
  4. <mvc:resources location="/static/" mapping="/static/**" />
  5. <!-- 扫描注解 -->
  6. <context:component-scan base-package="com.ztz.springmvc.controller"/>
  7. <!-- 视图解析器 -->
  8. <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  9. <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
  10. <!-- 前缀 -->
  11. <property name="prefix" value="/WEB-INF/jsp/"/>
  12. <!-- 后缀 -->
  13. <property name="suffix" value=".jsp"/>
  14. </bean>
  15. <!-- 上传文件 -->
  16. <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  17. <property name="defaultEncoding" value="utf-8"/>
  18. <!-- 最大内存大小 -->
  19. <property name="maxInMemorySize" value="10240"/>
  20. <!-- 最大文件大小，-1为不限制大小 -->
  21. <property name="maxUploadSize" value="-1"/>
  22. </bean>

一、 单文件上传

当然在一个表单中，需要添加enctype="multipart/form-data"，一个表单有文件域，肯定也有基本的文本框，可以一次性提交，springmvc能给我们区别出来，来做不同的处理。首先看下普通的model

  1. package com.ztz.springmvc.model;
  2. public class Users {
  3. private String name;
  4. private String password;
  5. //省略get set方法
  6. //重写toString()方便测试
  7. @Override
  8. public String toString() {
  9. return "Users [name=" + name + ", password=" + password +  "]";
  10. }
  11. }

这个是表单的JSP页面：

  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. request.setAttribute("basePath", basePath);
  7. %>
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  12. <title>FileUpload</title>
  13. </head>
  14. <body>
  15. <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">
  16. <label>用户名：</label><input type="text" name="name"/><br/>
  17. <label>密 码：</label><input type="password" name="password"/><br/>
  18. <label>头 像</label><input type="file" name="file"/><br/>
  19. <input type="submit" value="提  交"/>
  20. </form>
  21. </body>
  22. </html>

上传成功跳转的JSP页面，并且显示出上传图片：

  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
  2. <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6. request.setAttribute("basePath", basePath);
  7. %>
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  12. <title>头像</title>
  13. </head>
  14. <body>
  15. <img src="${basePath}${imagesPath}">
  16. </body>
  17. </html>

最后是Controller：

  1. package com.ztz.springmvc.controller;
  2. import java.io.File;
  3. import java.util.UUID;
  4. import javax.servlet.http.HttpServletRequest;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.RequestMethod;
  8. import org.springframework.web.bind.annotation.RequestParam;
  9. import org.springframework.web.multipart.MultipartFile;
  10. import com.ztz.springmvc.model.Users;
  11. @Controller
  12. @RequestMapping("/file")
  13. public class FileUploadController {
  14. @RequestMapping(value="/upload",method=RequestMethod.POST)
  15. private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile file,
  16. HttpServletRequest request)throws Exception{
  17. //基本表单
  18. System.out.println(users.toString());
  19. //获得物理路径webapp所在路径
  20. String pathRoot = request.getSession().getServletContext().getRealPath("");
  21. String path="";
  22. if(!file.isEmpty()){
  23. //生成uuid作为文件名称
  24. String uuid = UUID.randomUUID().toString().replaceAll("-","");
  25. //获得文件类型（可以判断如果不是图片，禁止上传）
  26. String contentType=file.getContentType();
  27. //获得文件后缀名称
  28. String imageName=contentType.substring(contentType.indexOf("/")+1);
  29. path="/static/images/"+uuid+"."+imageName;
  30. file.transferTo(new File(pathRoot+path));
  31. }
  32. System.out.println(path);
  33. request.setAttribute("imagesPath", path);
  34. return "success";
  35. }
  36. //因为我的JSP在WEB-INF目录下面，浏览器无法直接访问
  37. @RequestMapping(value="/forward")
  38. private String forward(){
  39. return "index";
  40. }
  41. }

点击提交控制台输出：

Users [name=fileupload, password=test]

浏览器显示结果：

二、 多图片上传

springmvc实现多图片上传也很简单，我们把刚才的例子修改下，在加一个文件域，name的值还是相同

  1. <body>
  2. <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">
  3. <label>用户名：</label><input type="text" name="name"/><br/>
  4. <label>密 码：</label><input type="password" name="password"/><br/>
  5. <label>头 像1</label><input type="file" name="file"/><br/>
  6. <label>头 像2</label><input type="file" name="file"/><br/>
  7. <input type="submit" value="提  交"/>
  8. </form>
  9. </body>

展示图片来个循环，以便显示多张图片

  1. <body>
  2. <c:forEach items="${imagesPathList}" var="image">
  3. <img src="${basePath}${image}"><br/>
  4. </c:forEach>
  5. </body>

控制层代码如下：

  1. package com.ztz.springmvc.controller;
  2. import java.io.File;
  3. import java.util.ArrayList;
  4. import java.util.List;
  5. import java.util.UUID;
  6. import javax.servlet.http.HttpServletRequest;
  7. import org.springframework.stereotype.Controller;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RequestMethod;
  10. import org.springframework.web.bind.annotation.RequestParam;
  11. import org.springframework.web.multipart.MultipartFile;
  12. import com.ztz.springmvc.model.Users;
  13. @Controller
  14. @RequestMapping("/file")
  15. public class FileUploadController {
  16. @RequestMapping(value="/upload",method=RequestMethod.POST)
  17. private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile[] file,
  18. HttpServletRequest request)throws Exception{
  19. //基本表单
  20. System.out.println(users.toString());
  21. //获得物理路径webapp所在路径
  22. String pathRoot = request.getSession().getServletContext().getRealPath("");
  23. String path="";
  24. List<String> listImagePath=new ArrayList<String>();
  25. for (MultipartFile mf : file) {
  26. if(!mf.isEmpty()){
  27. //生成uuid作为文件名称
  28. String uuid = UUID.randomUUID().toString().replaceAll("-","");
  29. //获得文件类型（可以判断如果不是图片，禁止上传）
  30. String contentType=mf.getContentType();
  31. //获得文件后缀名称
  32. String imageName=contentType.substring(contentType.indexOf("/")+1);
  33. path="/static/images/"+uuid+"."+imageName;
  34. mf.transferTo(new File(pathRoot+path));
  35. listImagePath.add(path);
  36. }
  37. }
  38. System.out.println(path);
  39. request.setAttribute("imagesPathList", listImagePath);
  40. return "success";
  41. }
  42. //因为我的JSP在WEB-INF目录下面，浏览器无法直接访问
  43. @RequestMapping(value="/forward")
  44. private String forward(){
  45. return "index";
  46. }
  47. }

PS:本demo地址：http://download.csdn.net/detail/zwz568017880/9043089

springmvc上传图片并显示图片--支持多图片上传的更多相关文章

  1. Jquery图片上传组件，支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  2. ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  3. PHP 图片上传工具类（支持多文件上传）

    ====================ImageUploadTool======================== <?php class ImageUploadTool { private ...

  4. php 图片上传 并返回上传文件位置 支持多文件上传

    <?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...

  5. 适应各浏览器图片裁剪无刷新上传jQuery插件（转）

    看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...

  6. puzz: 图片和表单上传的不一致问题

    1.    方向1 用户提交表单, 图片和表单同步上传.(由同一服务器处理, 服务器压力大. 没有分离) 2.    方向2 图片和表单分开上传. 如图片访问ftp,表单提交后台(图片和后台分离) 2 ...

  7. 移动前端—H5实现图片先压缩再上传

    在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...

  8. 使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  9. #添加图片，最多只能上传9张.md

    #添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...

  10. 使用html5 FileReader获取图片，并异步上传到server(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...

随机推荐

  1. vue组件的配置属性

    vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...

  2. css相关问题

    display:none和visibility:hidden的区别? 前几天遇到的这个问题,表格布局:::::display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢 ...

  3. 解决编译apache出现的问题：configure: error: APR not found . Please read the documentation

    今日编译apache时出错: #./configure --prefix……检查编辑环境时出现: checking for APR... no configure: error: APR not fo ...

  4. 本地 Maven项目部署到Nexus Repository

    配置Nexus Repository 打开WEB管理界面:http://localhost:8081/nexus/index.html 点击右上角Log In进行登录,默认帐号:admin.密码:ad ...

  5. PAT 1005. 继续(3n+1)猜想 (25)

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对n=3进行验证的时候, ...

  6. BZOJ 3110 【Zjoi2013】 K大数查询

    Description 有N个位置,M个操作.操作有两种,每次操作如果是1 a b c的形式表示在第a个位置到第b个位置,每个位置加入一个数c如果是2 a b c形式,表示询问从第a个位置到第b个位置 ...

  7. js 随笔

    setInterval:即使在方法中使用了stopInterval这个方法也要执行完才会停止自行重复执行,解决:使用return false来跳出方法. JS string和num:当一个是字符串数字 ...

  8. JavaEE 获取路径全攻略

    本篇博客是 JavaWeb 应用服务器端在不同环境下获取文件路径的全面总结. 获取文件路径后主要应用的场景,读取 JavaWeb 自定义配置文件.在特定路径下生成各种类型的文件提供下载...... 想 ...

  9. 更好的逐帧动画函数 — requestAnimationFrame 简介

    本文将会简单讲讲 requestAnimationFrame 函数的用法,与 setTimeout/setInterval 的区别和联系,以及当标签页隐藏时 requestAnimationFrame ...

  10. Bash on Windows 抢鲜测试 -- 介绍及安装

    前言 微软在上周的Windows BUILD大会上宣布,WIN10将引入原生Bash,并将很快在技术预览版中推出. 如此一来,windows的命令行工具就不再只有cmd和powershell了,我们可 ...