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

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

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

[java] view plain copy

<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的完整配置都展现出来）：

[html] view plain copy

<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

[java] view plain copy

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页面：

[java] view plain copy

<%@ 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页面，并且显示出上传图片：

[java] view plain copy

<%@ 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：

[java] view plain copy

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的值还是相同

[java] view plain copy

<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>

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

[java] view plain copy

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

控制层代码如下：

[java] view plain copy

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";
}
}

时间： 2024-12-20 01:04:41

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

mvc上传图片预览，支持多图上传

@using (Html.BeginForm("Index_load", "Index_", new { }, FormMethod.Post, new { @id = "form0", @class = "form-horizontal", @enctype = "multipart/form-data" })) { <div> <input type=&qu

====================ImageUploadTool======================== <?php class ImageUploadTool { private $file; //文件信息 private $fileList; //文件列表 private $inputName; //标签名称 private $uploadPath; //上传路径 private $fileMaxSize; //最大尺寸 private $uploadFiles; //上传文件

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

在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法. 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.根据查看caniuse,本demo里使用到的FileReader.Blob.Formdata对象均已在大部分移动设备浏览器中得到了实现(safari6.0+.android 3.0+),所以直接在前

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

看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

php图片处理之图片转为base64格式上传

我们在开发系统时,处理图片上传是不可避免的,使用thinkphp的肯定很熟悉 import("@.ORG.UploadFile"); 的上传方式. 今天我们来讲一个使用html5 base64上传图片的方法. 其实就是用到html5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦,老生常谈的问题了,远离IE,珍惜生命. 先扔个demo出来给大伙体验体验哈. http://t.lanchenglv.com/lan/index.php/Base64/images

js实现图片预览以及上传

HTML 代码: <input type="file" id="fileid" onchange="filesize(this)" runat="server" size="80" Width="200px" Height="25px"/> <input type="hidden" id="hidden_s&quo

在ASP.NET中实现图片、视频文件上传方式

一.图片 1.在前端用<asp:FileUpload ID="UpImgName" runat="server"/>控件 2.在后台.cs中写上 protected void btnSubmit_Click(object sender,EventArgs e) { string strImgPath=string.Empty; string strDateTime=dateTime.Now.Tostring("yyyyMMddhhmmss&qu

【Android实战】----基于Retrofit实现多图片/文件、图文上传

一.再次膜拜下Retrofit Retrofit无论从性能还是使用方便性上都很屌!!!,本文不去介绍其运作原理(虽然很想搞明白),后面会出专题文章解析Retrofit的内部原理:本文只是从使用上解析Retrofit实现多图片/文件.图文上传的功能. 二.概念介绍 1)注解@Multipart 从字面上理解就是与多媒体文件相关的,没错,图片.文件等的上传都要用到该注解,其中每个部分需要使用@Part来注解..看其注释 /** * Denotes that the request body is m

处理带说明信息的图片与处理文件上传四（62）

一 .处理带说明信息的图片与处理文件上传 void delete() 删除保存在临时目录中的文件. String getContentType() 获取文档的类型 Returns the content type passed by the browser or null if not defined. String getFieldName() 获取字段的名称,即name=xxxx Returns the name of

在线修改图片尺寸缩放网站（完美解决图片过大无法上传问题）

在线修改图片尺寸缩放网站(完美解决图片过大无法上传问题) http://pic.sdodo.com/tool/picadjust/ http://www.zhengzong.cn/bbsxp/thread-8136-1-1.html 一次使用windows xp用头像是用到因头像尺寸标准为48*48 Look! 成功修改的小猫咪! Windows Xp / 2003用户头像位置 C:\Documents and Settings\All Users\Application Data\Micro

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

一、 单文件上传

二、 多图片上传

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

一、单文件上传

二、多图片上传