JAVA servlet 和 springmvc 两种方式上传单个及多个图片文件；简单快速掌握

本文链接：https://blog.youkuaiyun.com/weixin_46825305/article/details/128096386

1.servlet 上传

4.用表单传送数据

5.用FromData打包 ajxs传送数据

2.springmvc 上传文件

3.前端表单传送数据

4.前端用FromData 和ajxs传送

1.servlet 上传

上传文件需要用到两个jar包，可自行搜索下载

2.在服务器目录创建存放文件的文件夹

3.java 代码如下

package com.example.eshop_manager.controller;

import cn.hutool.json.JSONUtil;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/picload")
public class PicLoadController extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置响应的编码格式
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf-8;");
        //设置允许前端的AJAX请求（允许跨域）
        resp.setHeader("Access-Control-Allow-Origin", "*");
        //给前端返回一个存放文件的集合，方便取名字
        ArrayList<String> fileStringNemaList = new ArrayList<>();

        try {
            //实例化（工厂对象）
            ServletFileUpload servletFileUpload = new ServletFileUpload(new DiskFileItemFactory());
            //获取前端打包过来的数据
            List<FileItem> list = servletFileUpload.parseRequest(req);

            for (FileItem f:list) {
                if (!f.isFormField() && f.getSize()>0) { //非文本数据，是文件数据 且非空

                    String name = f.getName();//获取文件名
                    String suffixName = name.substring(name.lastIndexOf("."), name.length());//获取文件后缀名

                    //获取文件夹在tomcat实际路径
                    String picUpload = getServletContext().getRealPath("picUpload");
                    //System.out.println(picUpload);
                    //给文件命名,防止重复
                    String fileName = System.currentTimeMillis()+""+ ( (int)Math.random()*1000 ) + suffixName;

                    //写出，write方法需要一个File对象
                    File file = new File(picUpload + "\\" + fileName);
                    f.write(file);
                    //将名字添加到集合
                    fileStringNemaList.add(fileName);
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }

        resp.getWriter().println(JSONUtil.toJsonStr(fileStringNemaList));
    }
}

4.用表单传送数据

前端（此处在jsp做的测试）表单属性 enctype="multipart/form-data 必写。（input type的name属性可一致可不一致）

<form action="${pageContext.request.contextPath}/picload" method="post" enctype="multipart/form-data">
 
  商品大图：<input type="file" name="book_logo_big" />
  <hr />
  商品小图：<input type="file" name="book_logo_small" />

  <hr />
  商品子图1：<input type="file" name="pic_names" />
  <hr />
  商品子图2：<input type="file" name="pic_names" />
  <hr />
  商品子图3：<input type="file" name="pic_names" />
  <hr />
  商品子图4：<input type="file" name="pic_names" />
  <hr />
  <button type="submit">保存</button>
</form>

5.用FromData打包 ajxs传送数据

前端jquery代码,此处在jsp做的测试

 var formData = new FormData();
 formData.append("文件名", 表单文件内容)

//表单内容取值方法如下   var pic_name1 =  $("input[name='pic_name1']")[0].files[0]

 $.ajax({
           url: '${pageContext.request.contextPath}/picload',
           type: 'POST',
           cache: false,
           data: formData,
           processData: false,
           contentType: false
       }).done(function (res) {
               
           if (res.length > 0) {
               alert("成功")
           } else {
               show_err_msg('上传子图片失败');
           }
       }).fail(function (res) {
           show_err_msg('上传图片失败');
       });

6.测试成功

2.springmvc 上传文件

1.springmvc上传文件也依赖上面的两个jar包

2.代码和servlet差不多，换汤不换药。springmvc的参数类型必须是MultipartFile 且参数前一定要加@RequestParam注解

package com.example.eshop_springMVC.controller;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/PicLoadController")
public class PicLoadController {

    @RequestMapping("/picload")
    @ResponseBody
    //添加图片要加@RequestParam
    public ArrayList<String> picLoad(@RequestParam(value = "book_logo_big",required = false) MultipartFile book_logo_big,
                                     @RequestParam(value = "book_logo_small",required = false) MultipartFile book_logo_small,
                                     @RequestParam(value = "pic_names",required = false) MultipartFile[] pic_names,
                        HttpServletRequest request) throws IOException {
        //保存文件名字，返回给前端
        ArrayList<String> fileStringNemaList = new ArrayList<>();

        if(book_logo_big!=null && !book_logo_big.isEmpty()){
            String bookLogoBig = savePic(book_logo_big, request);
            fileStringNemaList.add(bookLogoBig);
        }

        if(book_logo_small!=null && !book_logo_small.isEmpty()){
            String bookLogoSmall = savePic(book_logo_small, request);
            fileStringNemaList.add(bookLogoSmall);
        }


        for (MultipartFile file:pic_names) {
            if (file!=null && !file.isEmpty()){
                String picName = savePic(file, request);
                fileStringNemaList.add(picName);
            }
        }
        return fileStringNemaList;

    }


    /**
     * 上传文件，返回文件名字
     * @param pic
     * @param request
     * @return
     * @throws IOException
     */
    private String savePic(MultipartFile pic, HttpServletRequest request) throws IOException {

        String name = pic.getOriginalFilename();//获取文件名
        String suffixName = name.substring(name.lastIndexOf("."), name.length());//获取文件后缀名

        //获取文件夹在tomcat实际路径
        String picUpload = request.getServletContext().getRealPath("picUpload");
        //System.out.println(picUpload);
        //给文件命名,防止重复
        String fileName = System.currentTimeMillis() + "" + ((int) Math.random() * 1000) + suffixName;

        //写出，write方法需要一个File对象
        File file = new File(picUpload + "\\" + fileName);
        pic.transferTo(file);

        return fileName;

    }
}

3.前端表单传送数据

前端代码，参数名一致则是 MultipartFile数组。页面name属性值需和controller参数名一致。若不一致，在@RequestParam内加value属性

<form action="${pageContext.request.contextPath}/picload" method="post" enctype="multipart/form-data">
 
  商品大图：<input type="file" name="book_logo_big" />
  <hr />
  商品小图：<input type="file" name="book_logo_small" />

  <hr />
  商品子图1：<input type="file" name="pic_names" />
  <hr />
  商品子图2：<input type="file" name="pic_names" />
  <hr />
  商品子图3：<input type="file" name="pic_names" />
  <hr />
  商品子图4：<input type="file" name="pic_names" />
  <hr />
  <button type="submit">保存</button>
</form>

4.前端用FromData 和ajxs传送

和servlet步骤类似，在fromData添加的方法里，有多个名字相同的文件名key ，springmvc会自动识别为数组

 var formData = new FormData();
 formData.append("文件名", 表单文件内容)

//表单内容取值方法如下   var pic_name1 =  $("input[name='pic_name1']")[0].files[0]

 $.ajax({
           url: '${pageContext.request.contextPath}/picload',
           type: 'POST',
           cache: false,
           data: formData,
           processData: false,
           contentType: false
       }).done(function (res) {
               
           if (res.length > 0) {
               alert("成功")
           } else {
               show_err_msg('上传子图片失败');
           }
       }).fail(function (res) {
           show_err_msg('上传图片失败');
       });