只是个demo，需要数据校验，流程是通的

配置上传文件的解析器

前端代码;

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>

<style>
.img{
width:150px;
height:90px;
}
</style>

</head>
<body>
<form enctype="multipart/form-data" return:false;>
<input type="text" name='goodsName'>
<input type="file" id="loadfile" class="imgInput" name="upfile" value="上传" multiple="multiple"/><br>

<!--<img src="" class="img">
<img src="" class="img img1">-->
<div id="imgCont"></div>
</form>
<button id="sub">提交</button>

<script type="text/javascript" src="js/jquery.min.js" ></script>
<script>
var curFiles=[];
$(function(){
$(".imgInput").change(function(){
console.log($(this));
// console.log(URL.createObjectURL($(this)[0].files.length));
console.log(this.files.length);
var files=this.files;
if(files && files.length){
Array.prototype.push.apply(curFiles,files);
}
console.log(curFiles);
var len=this.files.length;
var html="";
for(var i=0;i<len;i++){
html+='<img src="'+URL.createObjectURL($(this)[0].files[i])+'"'+
'class="img"><span class="delImg" index="'+i+'">删除</span>'
}
$("#imgCont").html(html);
demo();

});

})
function demo(){
$(".delImg").click(function(){
var index=$(this).attr('index');
delete curFiles[index];
console.log(curFiles);
$(this).prev().remove();
$(this).remove();

})

}

</script>
<script>
$(function(){

$("#sub").click(function(){
var data = new FormData($('#form')[0]);
for(var i=0;i<curFiles.length;i++){
data.append('files',curFiles[i]);
}
console.log('woshidata'+data);
$.ajax({
url:'morePic',
method:'post',
data:data,
processData:false,
contentType:false,
success:function(data){

}

});

});
})
</script>
<br>

</body>
</html>

后台代码

import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServletRequest;

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;
@MultipartConfig
@Controller
public class TestController {

@ResponseBody
@RequestMapping("morePic")
public void morePic(MultipartFile[] files,HttpServletRequest request) {
int i=0;
for(MultipartFile file: files) {
i++;
String x=file.getOriginalFilename();
System.out.println(x);
}
System.out.println(i);

}

}

debug调试

可以看到前端选了三个文件，我删除后再提交后台就只接收到了两个文件，于是关于ajax提交图片上传就成功了

springMVC 多文件上传前后台demo的更多相关文章

  1. SpringMVC之文件上传异常处理

    一般情况下,对上传的文件会进行大小的限制.如果超过指定大小时会抛出异常,一般会对异常进行捕获并友好的显示出来.以下用SpringMVC之文件上传进行完善. 首先配置CommonsMultipartRe ...

  2. SpringMVC+ajax文件上传实例教程

    原文地址:https://blog.csdn.net/weixin_41092717/article/details/81080152 文件上传文件上传是项目开发中最常见的功能.为了能上传文件,必须将 ...

  3. springmvc图片文件上传接口

    springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller; import java.awt.image.Buffer ...

  4. SpringMVC学习--文件上传

    简介 文件上传是web开发中常见的需求之一,springMVC将文件上传进行了集成,可以方便快捷的进行开发. springmvc中对多部件类型解析 在 页面form中提交enctype="m ...

  5. Spring +SpringMVC 实现文件上传功能。。。

    要实现Spring +SpringMVC  实现文件上传功能. 第一步:下载 第二步: 新建一个web项目导入Spring 和SpringMVC的jar包(在MyEclipse里有自动生成spring ...

  6. springmvc实现文件上传

    springmvc实现文件上传 多数文件上传都是通过表单形式提交给后台服务器的,因此,要实现文件上传功能,就需要提供一个文件上传的表单,而该表单就要满足以下3个条件 (1)form表彰的method属 ...

  7. 【SpringMVC】文件上传Expected MultipartHttpServletRequest: is a MultipartResolver错误解决

    本文转载自:https://blog.csdn.net/lzgs_4/article/details/50465617 使用SpringMVC实现文件上传时,后台使用了 MultipartFile类, ...

  8. 关于SpringMVC的文件上传

    关于文件的上传,之前写过2篇文章,基于Struts2框架,下面给出文章链接: <关于Struts2的文件上传>:http://www.cnblogs.com/lichenwei/p/392 ...

  9. 一起学SpringMVC之文件上传

    概述 在Web系统开发过程中,文件上传是普遍的功能,本文主要以一个简单的小例子,讲解SpringMVC中文件上传的使用方法,仅供学习分享使用,如有不足之处,还请指正. 文件上传依赖包 如下所示,文件上 ...

随机推荐

  1. mysql常用的用户授权语句

    一:授权主要的 SQL //某个数据库所有的权限 ALL 后面+ PRIVILEGES GRANT ALL PRIVILEGES ON 库名.* TO '用户'@'%' IDENTIFIED BY ' ...

  2. jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框

    jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...

  3. Python 中使用 matplotlib 绘图中文字符显示异常的问题

    最近在使用 Python matplotlib 绘制图表时发现中文字符不能正确显示:比如在绘制折线图时,中文全部显示成▢▢▢的格式,虽然将数据改成英文就没什么问题,但是所有数据都这么做时不可行的,于是 ...

  4. System系统类

    System系统类 : 主要的作用是用于获取系统的一个参数. System类需要掌握的方法: arraycopy(Object src, int srcPos, Object dest, int de ...

  5. 五十九、linux 编程—— I/O 多路复用 fcntl

    59.1 介绍 前面介绍的函数如,recv.send.read 和 write 等函数都是阻塞性函数,若资源没有准备好,则调用该函数的进程将进入阻塞状态.我们可以使用 I/O 多路复用来解决此问题(即 ...

  6. [算法竞赛入门经典]Ancient Cipher, NEERC 2004,UVa1339

    Description Ancient Roman empire had a strong government system with various departments, including ...

  7. js数字串传参时变科学计数法

    例1:onclick=channel_info_listFt(\"'+val.gid+'\",'+val.deviceIdOwner+','+val.gname+') 当长度过长的 ...

  8. Base64 加密解密

    /// <summary> /// 编码 Base64 /// </summary> /// <param name="code"></p ...

  9. vue老司机

    你和答案之间只差一个关键字 1.对象二级查找值渲染早于数据获取   解决vue.js 数据渲染成功仍报错的问题

  10. win10只有edge浏览器能上网的解决方法

    问题描述:电脑就只有edge浏览器和自带的邮件可以上网,但是QQ Chrome,360浏览器都无法上网: 解决方法:打开命令提示符(管理员),执行netsh winsock reset,重启系统就好了 ...