只是个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. Httpclient发送json请求

    一.Httpclient发送json请求 public String RequestJsonPost(String url){    String strresponse = null;    try ...

  2. netty和protobuf的使用

    一.什么是protobuf Protobuf是google的开源项目,全称是Google Protocol Buffers,它是一个与语言无关.平台无关.可扩展的结构化数据序列化机制,类似XML,但它 ...

  3. Dynamic Clock in Terminal.

    #!/bin/bash tput civis while [ 1 ] do tput clear # tput cup 10 20 info=$(date "+%Y-%m-%d %H:%M: ...

  4. 解决SkyP2M工程常见问题所参考的博客汇总

    工程是基于64位的 1 Error 26 error C2491: 'HUDManager::_viewport' : definition of dllimport static data memb ...

  5. 蓝桥杯入门训练-Fibonacci数列

    刚刚开始刷题的时候就栽了个大跟头,稍微记一下...... 一开始不是很理解:“我们只要能算出这个余数即可,而不需要先计算出Fn的准确值,再将计算的结果除以10007取余数,直接计算余数往往比先算出原数 ...

  6. HTTP常见的状态码——面试题常考

    一些常见的状态码为:  200 - 服务器成功返回网页 400(错误请求)服务器不理解请求的语法. 404 - 请求的网页不存在 500(服务器内部错误)服务器遇到错误,无法完成请求. 503 - 服 ...

  7. Windows Hook技术

    0x01 简介 有人称它为“钩子”,有人称它为“挂钩”技术.谈到钩子,很容易让人联想到在钓东西,比如鱼钩就用于钓鱼.编程技术的钩子也是在等待捕获系统中的某个消息或者动作.钩子的应用范围非常广泛,比如输 ...

  8. 动态解析xml，并生成excel，然后发邮件。

    直接贴代码了! DECLARE @CurrentServer NVARCHAR(100)DECLARE @CurrentDatabase NVARCHAR(100)DECLARE @CurrentLo ...

  9. vue 中的translation操作----动态值

    在vue中,也会遇见translate的情况,这里顺带也可以带上如何查找页面中的元素的案例. 1.在加载过程中,有会遇见加载顺序先后的问题,然后查找页面元素null的情况,所以在mounted的钩子函 ...

  10. VS2013创建ASP.NET应用程序描述

    你的 ASP.NET 应用程序 恭喜! 你已创建了一个项目 此应用程序包含: 显示“主页”.“关于”和“联系方式”之间的基本导航的示例页 使用 Bootstrap 进行主题定位 身份验证,如果选择此项 ...