SpringMVC+JSP实现文件上传

SSM

发布日期: 2020-06-10

更新日期: 2021-03-02

文章字数: 1.9k

阅读时长: 10 分

eclipse以一个点餐系统添加新菜品为例来讲解文件上传，图片上传功能。

导入需要的jar包

1、commons-fileupload-1.2.2.jar
2、commons-io-2.0.1.jar

在springmvc.xml的配置文件中配置

<!-- 文件上传 --> 
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 上传文件大小限制 --> 
    <property name="maxUploadSize"> 
        <value>10485760</value> 
    </property> 
    <!-- 请求的编码格式, 和 jsp 页面一致 --> 
   <property name="defaultEncoding"> 
       <value>UTF-8</value> 
    </property> 
</bean>

JSP页面代码

这里只是表单提交部分，注意enctype="multipart/form-data"以及图片的input标签type="file"，jsp中 input标签当type=”file”的时候，浏览器会把文件的内容连同form的所有字段格式化后传递到服务器。

<form action="$&#123;pageContext.request.contextPath&#125;/FoodAddDo.do" method="post" enctype="multipart/form-data"> 
    <div class="input-group input-group-lg" style="margin-top: 20px;"> <div class="input-group-prepend"> 
        <span class="input-group-text" id="inputGroup-sizing-lg">菜品名称</span> 
        </div> 
        <input type="text" name="foodname" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"> </div> 
    <div class="input-group input-group-lg" style="margin-top: 20px;">
        <div class="input-group-prepend"> 
            <span class="input-group-text" id="inputGroup-sizing-lg">特色</span>
        </div>
        <input type="text" name="feature" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"> 
    </div>
    <div class="input-group input-group-lg" style="margin-top: 20px;">
        <div class="input-group-prepend"> 
            <span class="input-group-text" id="inputGroup-sizing-lg">食材</span>            </div>
        <input type="text" name="material" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
    </div> 
    <div class="input-group input-group-lg" style="margin-top: 20px;"> <div class="input-group-prepend"> 
        <span class="input-group-text" id="inputGroup-sizing-lg">价格/元</span> 
        </div> 
        <input type="text" name="price" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
       </div> 
       <div class="input-group mb-4" style="margin-top: 20px;"> 
     <div class="input-group-prepend"> 
        <label class="input-group-text" for="inputGroupSelect01">分类</label> 
        </div> 
        <select class="custom-select" name="type"> 
            <option value="1">家常</option>
            <option value="2">凉菜</option> 
            <option value="3">主食</option> 
            <option value="4">饮品</option> 
        </select> </div> 
    <div class="input-group input-group-lg" style="margin-top: 20px;">
        <div class="input-group-prepend"> 
            <span class="input-group-text" id="inputGroup-sizing-lg">图片</span>              </div>
        <input type="file" name="pitcture" id="pitcture" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"> 
      </div> 
    <div style="margin-top: 20px;"> 
        <input type="submit" class="btn btn-success" value="确认添加" style="margin-right: 20px;"> 
        <input type="reset" class="btn btn-primary" value="重置">
    </div> 
</form>

Controller部分

用MultipartFile对象接收文件，然后使用file的transferTo方法上传文件。

@RequestMapping(value = "/FoodAddDo", method = RequestMethod.POST) 
public ModelAndView foodAddDo( 
    @RequestParam(name = "pitcture") MultipartFile pitcture, 
    @RequestParam(name = "foodname", required = true) String foodname,              
    @RequestParam(name = "feature", required = true) String feature, 
    @RequestParam(name = "material", required = true) String material, 
    @RequestParam(name = "price", required = true) int price, 
    @RequestParam(name = "type", required = true) int type, ModelAndView model, HttpServletRequest request) throws IllegalStateException, IOException, SQLException &#123; 
    String picturePath = ""; 
    String ext = FilenameUtils.getExtension(pitcture.getOriginalFilename()); 
    // System.out.println("isEmpty："+pitcture.isEmpty()); 
    String oriPitctureNameString = pitcture.getOriginalFilename();// 获取后缀名
    String extPitctureNameString = oriPitctureNameString.substring(oriPitctureNameString.indexOf("."), oriPitctureNameString.length());// 加上点儿 
    picturePath = "images/newfood/" + Calendar.getInstance().getTimeInMillis() + extPitctureNameString;// 以时间点命名保证文件名称的唯一性 
    // System.out.println("picturePath:"+picturePath); 
    // picturePath:/images/newfood/...... 
    String pathString = request.getServletContext().getRealPath(picturePath); 
    // System.out.println("pathString:"+pathString); 
    // 这是上传后我们在Tomcate找图片的路径，pathString:D:\Program 
    // Files\apache-tomcat-9.0.5\apache-tomcat-9.0.5\wtpwebapps\zhouhailin0506_MealSystem\images\newfood\...... 
    File file = new File(pathString); if (pitcture != null) &#123; 
        //文件上传 pitcture.transferTo(file);
    &#125; 
    //写入数据库，注意存入数据库的是字符串新式的路径，图片文件在pathString中 
    if (fooddao.addFood(foodname, feature, material, price, type, picturePath)) &#123;
        model.setViewName("admin/food_list"); 
    &#125;
    return model;
&#125;

IDEA

图片文件上传并显示

maven项目导入依赖

  <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.3</version>
    </dependency>

upload.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图片上传</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<h1>图片上传</h1>

<div class="container">
    <!-- Content here -->

<form action="$&#123;pageContext.request.contextPath&#125;/doupload" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputEmail1">ID</label>
        <input  name="id"  type="text" class="form-control"  aria-describedby="emailHelp">
        <small id="" class="form-text text-muted">请输入id</small>
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">姓名</label>
        <input  name="name"  type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">请输入姓名</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">年龄</label>
        <input name="age" type="text" class="form-control" id="exampleInputPassword1">
    </div>

    <div class="input-group input-group-lg" style="margin-top: 20px;">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">图片</span>
        </div>
        <input type="file" name="pitcture" id="pitcture" class="form-control"
               aria-label="Sizing example input"
               aria-describedby="inputGroup-sizing-lg">
    </div>

    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">检查</label>
    </div>
    <button type="submit" class="btn btn-primary">确认</button>
    <input type="reset" class="btn btn-primary" value="重置">
</form>

</div>

</body>
</html>

see_infor.jsp

注意这里第24行的请求地址

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>表单查询</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>

<h1>展示账户数据列表</h1>
<table class="table">
    <tr>
        <th scope="col">学生id</th>
        <th scope="col">学生姓名</th>
        <th scope="col">学生年龄</th>
        <th scope="col">图片</th>
        <th scope="col">操作</th>
    </tr>

    <c:forEach items="$&#123;student&#125;" var="student">
    <tr>
        <td>$&#123;student.id&#125;</td>
        <td>$&#123;student.name&#125;</td>
        <td>$&#123;student.age&#125;</td>
        <td><img src="$&#123;pageContext.request.contextPath&#125;/studentPhoto?id=$&#123;student.id&#125;&photoPath=$&#123;student.photoPath&#125;" width="200px" height="200px" alt="..." class="img-thumbnail"></td>
        <td>删除。修改。</td>
    </tr>
    </c:forEach>

</body>
</html>

Student

public class Student &#123;

    private  Integer id;
    private  String name;
    private  int age;
    private  String photoPath;

    @Override
    public String toString() &#123;
        return "Studnet&#123;" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                ", photoPath='" + photoPath + '\'' +
                '&#125;';
    &#125;

    public Integer getId() &#123;
        return id;
    &#125;

    public void setId(Integer id) &#123;
        this.id = id;
    &#125;

    public String getName() &#123;
        return name;
    &#125;

    public void setName(String name) &#123;
        this.name = name;
    &#125;

    public int getAge() &#123;
        return age;
    &#125;

    public void setAge(int age) &#123;
        this.age = age;
    &#125;

    public String getPhotoPath() &#123;
        return photoPath;
    &#125;

    public void setPhotoPath(String photoPath) &#123;
        this.photoPath = photoPath;
    &#125;
&#125;

Controller

import java.io.*;

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 org.springframework.web.servlet.ModelAndView;
import zhouhailini506.pojo.Student;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@org.springframework.stereotype.Controller
public class Controller &#123;

    @RequestMapping(value = "/upload")
    public ModelAndView uploadPhoto(ModelAndView model) &#123;
        System.out.println("uploadPhoto get in");
        model.setViewName("upload");
        return model;
    &#125;

    @RequestMapping(value = "/doupload", method = RequestMethod.POST)
    public ModelAndView doupload(@RequestParam(name = "pitcture") MultipartFile uploadfile,
                                 @RequestParam(name = "id", required = true) int id,
                                 @RequestParam(name = "name", required = true) String name,
                                 @RequestParam(name = "age", required = true) int age,
                                 ModelAndView model, HttpServletRequest request) throws IOException &#123;
        System.out.println("doupload mapping get in");
        Student student=new Student();
        student.setId(id);
        student.setName(name);
        student.setAge(age);

        ServletContext application=request.getServletContext();
        String realPath=application.getRealPath("upload/");
        int index=uploadfile.getOriginalFilename().lastIndexOf(".");
        String suffix=uploadfile.getOriginalFilename().substring(index+1);
        String fileName=realPath+File.separator+id+"."+suffix;
        uploadfile.transferTo(new File((fileName)));

        student.setPhotoPath(suffix);
        System.out.println("student=>"+student);

        model.addObject("student",student);
        model.setViewName("see_infor");
        return  model;
    &#125;

    @RequestMapping("/studentPhoto")
    public void studentPhoto(String id, String photoPath, HttpServletRequest
                             request, HttpServletResponse response) throws IOException &#123;

        ServletContext application =request.getServletContext();
        String realPath=application.getRealPath("upload/");
        String fileName=realPath+File.separator+id+"."+photoPath;
        File file=new File(fileName);
        if (file.exists())&#123;
            byte[] buffer=new byte[1024];
            FileInputStream fis=null;
            BufferedInputStream bis=null;
            fis=new FileInputStream(file);
            bis=new BufferedInputStream(fis);
            OutputStream os=response.getOutputStream();
            int i=bis.read(buffer);
            while (i!=-1)&#123;
                os.write(buffer,0,i);
                i=bis.read(buffer);
            &#125;
        &#125;
    &#125;
&#125;