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

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

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

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

<mvc:annotation-driven/>
<mvc:resources location="/static/" mapping="/static/**" />
<context:component-scan base-package="com.ztz.springmvc.controller"/>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
<property name="prefix" value="/WEB-INF/jsp/"/>
<property name="suffix" value=".jsp"/>
</bean>
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"/>
<property name="maxInMemorySize" value="10240"/>
<property name="maxUploadSize" value="-1"/>
</bean>

一、单文件上传

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

package com.ztz.springmvc.model;
public class Users {
private String name;
private String password;
//省略get set方法
//重写toString()方便测试
@Override
public String toString() {
return "Users [name=" + name + ", password=" + password + "]";
}
}

这个是表单的JSP页面：

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

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

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>头像</title>
</head>
<body>
<img src="${basePath}${imagesPath}">
</body>
</html>

最后是Controller：

package com.ztz.springmvc.controller;
import java.io.File;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
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.multipart.MultipartFile;
import com.ztz.springmvc.model.Users;
@Controller
@RequestMapping("/file")
public class FileUploadController {
@RequestMapping(value="/upload",method=RequestMethod.POST)
private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile file,
HttpServletRequest request)throws Exception{
//基本表单
System.out.println(users.toString());
//获得物理路径webapp所在路径
String pathRoot = request.getSession().getServletContext().getRealPath("");
String path="";
if(!file.isEmpty()){
//生成uuid作为文件名称
String uuid = UUID.randomUUID().toString().replaceAll("-","");
//获得文件类型（可以判断如果不是图片，禁止上传）
String contentType=file.getContentType();
//获得文件后缀名称
String imageName=contentType.substring(contentType.indexOf("/")+1);
path="/static/images/"+uuid+"."+imageName;
file.transferTo(new File(pathRoot+path));
}
System.out.println(path);
request.setAttribute("imagesPath", path);
return "success";
}
//因为我的JSP在WEB-INF目录下面，浏览器无法直接访问
@RequestMapping(value="/forward")
private String forward(){
return "index";
}
}

点击提交控制台输出：

Users [name=fileupload, password=test]

浏览器显示结果：

二、多图片上传

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

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

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

<body>
<c:forEach items="${imagesPathList}" var="image">
<img src="${basePath}${image}"><br/>
</c:forEach>
</body>

控制层代码如下：

package com.ztz.springmvc.controller;
import java.io.File;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
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.multipart.MultipartFile;
import com.ztz.springmvc.model.Users;
@Controller
@RequestMapping("/file")
public class FileUploadController {
@RequestMapping(value="/upload",method=RequestMethod.POST)
private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile[] file,
HttpServletRequest request)throws Exception{
//基本表单
System.out.println(users.toString());
//获得物理路径webapp所在路径
String pathRoot = request.getSession().getServletContext().getRealPath("");
String path="";
List<String> listImagePath=new ArrayList<String>();
for (MultipartFile mf : file) {
if(!mf.isEmpty()){
//生成uuid作为文件名称
String uuid = UUID.randomUUID().toString().replaceAll("-","");
//获得文件类型（可以判断如果不是图片，禁止上传）
String contentType=mf.getContentType();
//获得文件后缀名称
String imageName=contentType.substring(contentType.indexOf("/")+1);
path="/static/images/"+uuid+"."+imageName;
mf.transferTo(new File(pathRoot+path));
listImagePath.add(path);
}
}
System.out.println(path);
request.setAttribute("imagesPathList", listImagePath);
return "success";
}
//因为我的JSP在WEB-INF目录下面，浏览器无法直接访问
@RequestMapping(value="/forward")
private String forward(){
return "index";
}
}

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

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

Jquery图片上传组件，支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）
我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...
PHP 图片上传工具类（支持多文件上传）
====================ImageUploadTool======================== <?php class ImageUploadTool { private ...
php 图片上传并返回上传文件位置支持多文件上传
<?php /** * Created by PhpStorm. * User: DY040 * Date: 2018/4/26 * Time: 13:23 */ echo '<pre&g ...
适应各浏览器图片裁剪无刷新上传jQuery插件（转）
看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...
puzz: 图片和表单上传的不一致问题
1. 方向1 用户提交表单, 图片和表单同步上传.(由同一服务器处理, 服务器压力大. 没有分离) 2. 方向2 图片和表单分开上传. 如图片访问ftp,表单提交后台(图片和后台分离) 2 ...
移动前端—H5实现图片先压缩再上传
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
#添加图片，最多只能上传9张.md
#添加图片,最多只能上传9张.md 前端页面: ```javascript <form id="imgForm" enctype="multipart/form-d ...
使用html5 FileReader获取图片，并异步上传到server(不使用iframe)
使用html5 FileReader获取图片,并异步上传到server(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax.把图片的base64编 ...

随机推荐

oracle round 函数,replace()函数
(1)如何使用 Oracle Round 函数 (四舍五入)描述 : 传回一个数值,该数值是按照指定的小数位元数进行四舍五入运算的结果.SELECT ROUND( number, [ decimal_ ...
如何定位web前后台的BUG
一.对系统整体的了解 Server端:jsp+Servlet+json 数据库:sql.MySQL.oracle等前台: 涉及到 jstl,jsp,js,css,htm等方面后台:servlet, ...
Nginx+keepalived双机热备（主从模式）
负载均衡技术对于一个网站尤其是大型网站的web服务器集群来说是至关重要的!做好负载均衡架构,可以实现故障转移和高可用环境,避免单点故障,保证网站健康持续运行.关于负载均衡介绍,可以参考:linux负载 ...
(原创)解决Excel 互操作错误"检索COML类工厂中 CLSID为 {00024500-0000-0000-C000-000000000046}的组件时失败，原因是出现以下错误: 80070005"
最近在.net中处理Excel文件数据导入时报出以下错误: 检索COML类工厂中 CLSID为 {00024500-0000-0000-C000-000000000046}的组件时失败,原因是出现以下 ...
Qt中的qreal
在桌面操作系统中(比如Windows, XNix等)qreal其实就是double类型:而在嵌入设备系统中,qreal则等同于float 类型.
Package Control Installation
simple 用 ctrl+~ 打开 sublime 的控制台,将下面代码复制进去. sublime text2: import urllib2, os, hashlib; h = '2915d185 ...
async 更优雅异步体验
上一篇<让 Generator 自启动>介绍了通过起动器让 Generator 跑起来,而本篇采用 async 实现更优雅的异步编程. 从例子开始借用上一篇例子中的例子说起. funct ...
jsp实现一条横线中间有字的样式
实现样式: ---------------------------------------------------- xxxxxx ---------------------------------- ...
cocos2dx-2.2.1 免 Cygwin 环境搭建（Win8+VS2013+ADT Bundle+android-ndk-r9c）
1.下载 ADT Bundle 解压到D盘 D:\adt-bundle-windows-x86_64-20131030: 2.下载 NDK-R9C,解压到 ADT 目录下:D:\adt-bundle- ...
libsvm使用详细说明
一,简介 LibSVM是台湾林智仁(Chih-Jen Lin)教授2001年开发的一套支持向量机的库,这套库运算速度还是挺快的,因此成为目前国内应用最多的SVM的库.详细的使用说明及博主博客见下链接: ...

springmvc上传图片并显示图片--支持多图片上传

一、 单文件上传

二、 多图片上传

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

随机推荐

热门专题

一、单文件上传

二、多图片上传