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

zoukankan html css js c++ java

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

    }

}
一辈子很短，努力的做好两件事就好；第一件事是热爱生活，好好的去爱身边的人；第二件事是努力学习，在工作中取得不一样的成绩，实现自己的价值，而不是仅仅为了赚钱；
查看全文

相关阅读:
python requests用法总结
 Linux统计某文件夹下文件的个数
 PM2使用及介绍
 如何区分USB 2.0 和USB 3.0插口
 npm突然找不到npm-cli.js的解决方法
 mRemoteNG
js中几种实用的跨域方法原理详解
 Tornado异步阻塞解决方案
 [阅读笔记]EfficientDet
iOS 保存视频AVAssetWriter

原文地址：https://www.cnblogs.com/linjiaxin/p/5628301.html

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

一、 单文件上传

二、 多图片上传

一、单文件上传

二、多图片上传