springboot 单个input多图片上传

最新推荐文章于 2024-07-07 11:22:54 发布

贾哇技术指南

最新推荐文章于 2024-07-07 11:22:54 发布

阅读量6.1k

点赞数 2

分类专栏： java 文章标签： springboot 多图片上传单个input

本文链接：https://blog.csdn.net/jtshongke/article/details/78516559

版权

java 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

1.项目是基于springboot

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

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

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

var imgSrc = [];  //存放图片路径
var imgFile = []; //存放文件流
var imgName = []; //存放图片名字
//选择图片的操作
function imgUpload(obj) {
	var oInput = '#' + obj.inputId;
	var imgBox = '#' + obj.imgBox;
	var btn = '#' + obj.buttonId;
	//用on是因为它可以动态的绑定事件
	$(oInput).on("change", function() {
		//获取type=file的input
		var fileImg = $(oInput)[0];
		//得到所有的图片列表
		var fileList = fileImg.files;
		for(var i = 0; i < fileList.length; i++) {
			//得到每个图片的路径
			var imgSrcI = getObjectURL(fileList[i]);
			//向文件名的数组末尾添加此文件名
			imgName.push(fileList[i].name);
			//向路径的数组末尾添加路径
			imgSrc.push(imgSrcI);
			//在文件流数组的末尾添加文件
			imgFile.push(fileList[i]);
		}
		//将图片展示出去
		addNewContent(imgBox);
	})
	
	$(btn).on('click', function() {
		if(!limitNum(obj.num)){
		  	alert("最多只能上传"+obj.num+"张照片!");
		  	return false;
		}
		
		//用FormData对象上传
		var fd = new FormData($('#upBox')[0]);
		//由于fd对象中已经包含<input type='file'>的input标签，如果不删除，就会造成重复上传
		fd.delete("file");
		//将文件流循环添加到FormData对象中
		for(var i=0;i<imgFile.length;i++){
			fd.append(obj.data,imgFile[i]);
		}
		//上传所有的图片
		submitPicture(obj.upUrl, fd);
	})
}
//图片展示
function addNewContent(obj) {
	$(imgBox).html("");
	for(var a = 0; a < imgSrc.length; a++) {
		var oldBox = $(obj).html();
		$(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' οnclick="imgDisplay(this)"><p οnclick="removeImg(this,' + a + ')" class="imgDelete">删除</p></div>');
	}
}
//删除
function removeImg(obj, index) {
	//向数组中删除元素
	imgSrc.splice(index, 1);
	imgFile.splice(index, 1);
	imgName.splice(index, 1);
	var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
	addNewContent(boxId);
}
//限制图片个数
function limitNum(num){
	if(!num){
		return true;
	}else if(imgFile.length>num){
		return false;
	}else{
		return true;
	}
}

//上传(将文件流数组传到后台)
function submitPicture(url,data) {
    for (var p of data) {
	  	console.log(p);
	}
	if(url&&data){
		$.ajax({
			type: "post",
			url: url,
			async: true,
			data: data,
			//下面这两个要写成false，要不然上传不了。
			processData: false,
			contentType: false,
			success: function(dat) {
				console.log(dat);
			}
		});
	}else{
	  alert('数据格式不正确!');
	}
}
//当鼠标移到图片上时，显示x删除
function imgDisplay(obj) {
	var src = $(obj).attr("src");
	var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;"><img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="closePicture(this)">×</p></div>'
	$('body').append(imgHtml);
}
//关闭
function closePicture(obj) {
	$(obj).parent("div").remove();
}
//图片预览路径
function getObjectURL(file) {
	var url = null;
	if(window.createObjectURL != undefined) { // basic
		url = window.createObjectURL(file);
	} else if(window.URL != undefined) { // mozilla(firefox)
		url = window.URL.createObjectURL(file);
	} else if(window.webkitURL != undefined) { // webkit or chrome
		url = window.webkitURL.createObjectURL(file);
	}
	return url;
}

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();
	}
}

前台效果：

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

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

贾哇技术指南

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
6
评论
springboot 单个input多图片上传

最近有用到多图片上传的功能，但是不能有多少个图片就写多少个标签，于是在网上找了一个js展现图片的模板，自己改造之后实现了单个input上传多个图片的功能。1.项目是基于springboot快速搭建springboot：http://start.spring.io/项目名是studySpringBoot，如下图，如不想搭建，可以直接用我后面的百度云源代码2.前台代码如下：
复制链接

扫一扫

专栏目录