**前端页面**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style>
body{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 加入垂直滚动条可以滑动 -->
<div id="ims" style="width: 70%;height: 400px; background: #55555500;border: 1px #555555 solid;overflow-y:scroll"" >
<!--label标签关联file图片上传输入框 让输入框隐藏达到较好的样式-->
<label for="fileUpload">
<img src="img/z_add.png" id="inpuita" style="width: 100px;height: 100px;"/>
</label>
<input type="file" name="sex" id="fileUpload" style="display: none;" />
<img/>
</div>
<button onclick="sub()">提交</button>
<script>
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;
}
//Files 数组对象 用于发送数据
var s=[];
$("#fileUpload").change(function () {
var rd=new FileReader(); //创建文件读取对象
var file=document.getElementById("fileUpload").files[0];
s.push(file);
alert(getObjectURL(file))
rd.readAsDataURL(file); //读取类型为base64
// 用于回显
$("#ims").append("<img id='item"+s.length+"' onclick='del("+s.length+")' style='width: 100px;height: 100px;' src="+ getObjectURL(this.files[0]) +" />")
});
function del(r){
$("#item"+r).remove()
// 删除回显图片同时 为数组中该索引赋值为-1
s[r-1]=-1;
}
function sub(){
// 创建FormData对象
var formdata2 = new FormData();
for (var i = 0; i <s.length ; i++) {
// 进行筛选 为-1的说明为已删除 不进行传输
if (s[i]!=-1) {
formdata2.append("imga", s[i]);//获取文件
}
}
// 发送的请求
$.ajax({
type: 'POST',
url: "http://192.168.3.39:8080/AnQuan/imgsub/input",
data: formdata2,
dataType: "", //返回样式
contentType : false, //不设置Content-Type请求头 好像必须带
processData : false, // 不处理发送的数据 好像必须带
// 返回结果
success: function f() {
}
});
}
</script>
</body>
</html>
**服务器接收**
@Controller
@RequestMapping("AnQuan/imgsub")
public class ImgCo {
@RequestMapping("/input")
@ResponseBody
public String input(@RequestParam("imga")MultipartFile[] imga) {
System.out.println("个数");
System.out.println(imga.length);
int i=1;
for (MultipartFile multipartFile : imga) {
try {
System.out.println("进入"+i+"次");
i++;
String contentType = multipartFile.getContentType();
System.out.println("contentType:"+contentType);
String name = multipartFile.getName();
System.out.println("name:"+name);
String originalFilename = multipartFile.getOriginalFilename();
System.out.println("originalFilename:"+originalFilename);
BufferedInputStream ios=new BufferedInputStream(multipartFile.getInputStream());
BufferedOutputStream bos=new BufferedOutputStream(new FileOutputStream("D:/imga/"+new Date().getTime()+i+".png"));
byte[] len=new byte[1024];
int a;
while ((a=ios.read(len))!=-1){
bos.write(len,0,a);
}
// bos.flush();
bos.close();
ios.close();
}catch (Exception e){
System.out.println(e.toString());
}
}
// System.out.println(imga);
return "";
}
}
io流关闭最好判断下
