只是个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. python第六天

    深浅拷贝,元祖,字典 ,集合的定义以及基本操作方法 深浅拷贝 # 值拷贝:应用场景最多​值拷贝:先创建一个列表ls = [1, 'abc', [10]] 再定义 ls1 = ls  此处ls1会直接将 ...

  2. <div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑

    需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<texta ...

  3. express起一个代理服务器，webpack-dev-server同时起多个

    由于系统业务比较复杂,微前端(多页应用)实现期望用一个app一个webpack的形式,这样可以更好隔离,而且每个app的webpack config可以定制. Nginx在前端项目中安装比较麻烦,所以 ...

  4. axios 或 ajax 请求文件

    axios 或 ajax 请求文件 axios({ url: path + '/monitor/exportPicture' + '?access_token=' + getToken(), meth ...

  5. mybatis中 keyProperty="id" 的作用

    keyProperty="id"的作用是: 一般都是结合数据库自动生成主键来使用,由于是数据库生成的主键, 所以在这个对象持久化到数据库之前是对象中的这个属性是没有属性值的,但是在 ...

  6. 记一次安装python umysql模块的报错

    今天,在写一个python脚本的时候要用到数据库相关的umysql模块,但在引用的时候报没有此模块,第一反应就是去安装此模块,但是报没有找到pip命令. #pip install umysql -ba ...

  7. [Deep Learning] 常用的Active functions & Optimizers

    深度学习的基本原理是基于人工神经网络,输入信号经过非线性的active function,传入到下一层神经元:再经过下一层神经元的activate,继续往下传递,如此循环往复,直到输出层.正是因为这些 ...

  8. iTOP-4418开发板Android 5.1/4.4丨Linux + Qt5.7丨Ubuntu12.04系统

    核心板参数 尺寸:50mm*60mm 高度:核心板连接器组合高度1.5mm PCB层数:6层PCB沉金设计 4418 CPU:ARM Cortex-A9 四核 S5P4418处理器 1.4GHz 68 ...

  9. javaFX的控制台实现

    最近做了个javaFX的工具,想弄个控制台输出信息,准备用TextArea来模拟console,但直接操纵console对象的话不依赖这个项目的地方就无法输出信息到控制台了,至于log,以前弄过一个输 ...

  10. JAVA实例

     JAVA实例1  1 package Demo3; import java.io.File; import java.io.FileReader; import java.io.IOExceptio ...