springboot 单个input多图片上传

亦凉 2022-06-05 00:16 171阅读 0赞

**最近有用到多图片上传的功能，但是不能有多少个图片就写多少个<input type=file>标签，于是在网上找了一个js展现图片的模板，自己改造之后实现了单个input上传多个图片的功能。**

## 1.项目是基于springboot ##

快速搭建springboot： [http://start.spring.io/][http_start.spring.io]

项目名是studySpringBoot，如下图，如不想搭建，可以直接用我后面的百度云源代码

![Center][]

## 2.前台代码如下： ##

uploadImg.html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>一个input实现多图片上传</title>
    		<script src="js/jquery.min.js"></script>
    		<script src="js/uploadImg.js"></script>
    		<style type="text/css"></style>
    		<link rel="stylesheet" type="text/css" href="css/uploadImg.css">
    	</head>
    	<body>
    		
    		<form action="" id="upBox">
    		
    			小区名字：<input name="areaName">
    			
    			<div id="inputBox">
    				<input type="file" name="file" title="请选择图片" id="file" multiple="multiple" accept="image/png,image/jpg,image/gif,image/JPEG"/>选择图片
    			</div>
    		
    		    <div id="imgBox">
    		    </div>
    		    <button id="btn">上传</button>
    		</form>
    	</body>
    	<script type="text/javascript">
    	imgUpload({
    		inputId:'file', //input框id
    		imgBox:'imgBox', //图片容器id
    		buttonId:'btn', //提交按钮id
    		upUrl:'/testController/uploadImg',  //提交地址
    		data:'file', //参数名
    		num:"10"//最多上传图片个数
    	})
    </script>
    	
    </html>

uploadImg.js

## 3.在src/main/java下建立一个包controller,包下面有两个类，一个是用来启动主程序，一个用来上传图片。由于功能简单，我这里就没写service，用到项目里面的时候要尽可能把业务处理写到service中去。 ##

SampleController

package controller;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
    import org.springframework.context.annotation.ComponentScan;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    @EnableAutoConfiguration
    @ComponentScan("controller")
    public class SampleController {
    	@RequestMapping("/test")
    	@ResponseBody
    	String home() {
    		return "Hello World!";
    	}
    	public static void main(String[] args) throws Exception {
    		SpringApplication.run(SampleController.class, args);
    	}
    }

UploadImageController

package controller;
    
    import java.io.File;
    import java.io.FileOutputStream;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    @Controller
    @RequestMapping("/testController")
    public class UploadImage {
    
    	@RequestMapping("/uploadImg")
    	@ResponseBody
    	public void uploadImg(MultipartFile file[], String areaName) throws Exception {
    		System.out.println("得到的areaName:"+areaName);
    		// 设置上传的路径是D盘下的picture
    		String imgPath = "D:/picture/";
    		
    		for (MultipartFile f : file) {
    			// 图片的名字用毫秒数+图片原来的名字拼接
    			System.out.println(f.getSize());
    			System.out.println(f.getBytes());
    			String imgName = System.currentTimeMillis() + f.getOriginalFilename();
    			//上传文件
    			uploadFileUtil(f.getBytes(), imgPath, imgName);
    		}
    	}
    
    	/**
    	 * 上传文件的方法
    	 * @param file：文件的字节
    	 * @param imgPath：文件的路径
    	 * @param imgName：文件的名字
    	 * @throws Exception
    	 */
    	public void uploadFileUtil(byte[] file, String imgPath, String imgName) throws Exception {
    		File targetFile = new File(imgPath);
    		if (!targetFile.exists()) {
    			targetFile.mkdirs();
    		}
    		FileOutputStream out = new FileOutputStream(imgPath + imgName);
    		out.write(file);
    		out.flush();
    		out.close();
    	}
    }

前台效果：

![Center 1][]

点击上传即可把图片上传到D盘下的picture文件夹下。

源代码百度云链接：http://pan.baidu.com/s/1qYl0uIS 密码：r5gu

[http_start.spring.io]: http://start.spring.io/
[Center]: /images/20220605/5b0b50d9334447e0a17d73560a1bffb0.png
[Center 1]: /images/20220605/282e7d13aa5148e6a2aaeda3a4397c44.png