需要上传多个图片分别上传，本来提供的工具类里上传一张可以form表单对象实现 后台用MultipartFile file

var formdata = new FormData($("#inputForm")[0]);

@RequestMapping(value="/uploadImg")
@ResponseBody
public String uploadImg(MultipartFile file,HttpServletRequest request,HttpServletResponse response) throws IOException{

String name = file.getOriginalFilename();

但是两张图片就不能在后台接到数据了，原因是name="file"的才能被接收，第二个不会接收

解决方案一：用两个form提交 问题就解决了  但是不适用外层还有一层form

<body>
<form enctype="multipart/form-data" id="inputForm1" modelAttribute="bankAdminist" action="" method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label">*LOGO：</label>
<div class="controls">
<input type="hidden" id="image" name="pcLogopic" value="" />
<input type="file" name="file" id="file1"/><input type="button" value="上传" onclick="uploadImage()" class="btn btn-primary"/>

</div>
</div>
</form>
<form enctype="multipart/form-data" id="inputForm2" modelAttribute="bankAdminist" action="" method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label">*LOGO：</label>
<div class="controls">
<input type="hidden" id="image2" name="appLogopic" value="" />

<input type="file" name="file" id="file2"/><input type="button" value="上传" onclick="uploadImage2()" class="btn btn-primary"/>

</div>
</div>
</form>

<script type="text/javascript">

function uploadImage(){
var file=$("#file1").val();
var num=1;
upload(file,num);
}
function uploadImage2(){
var num=2
var file=$("#file2").val();
upload(file,num);
}
function upload(file,num){
if(file==""){
alert("请选择上传的文件！");
return false ;
}
var form = document.getElementById("inputForm"+num);
alert(file+"---"+form)
//得到formdata对象
var formdata = new FormData(form);
formdata.append('file',file);
//ajax异步上传图片
//返回的filename类似 front/a.jpg
alert(JSON.stringify(formdata));
$.ajax({
url : "/momo/picture/####.do",
type : "POST",
data : formdata,
//dataType: "json",
cache : false,
contentType : false, //不可缺
processData : false, //不可缺
success:function(filename){
},
error: function (returndata) {
alert(JSON.stringify(returndata));
}
});
}

解决方案二：用h5  的<input type="file" name="file" id="file1" multiple="multiple"/>

<input type="file" name="file" id="file1" multiple="multiple"/><input type="button" value="上传" onclick="uploadImage()" class="btn btn-primary"/>

function uploadImage(){
var file=$("#file1").val();
var num=1;
upload(file,num);
}

function upload(file,num){

//得到formdata对象
var files= $("#file"+num).get(0).files;
//如果有选择图片则上传图片
var formdata = new FormData();
if(files.length>0){
for(var i=0;i<files.length;i++){
formdata.append('file',files[i]);
}
}

//ajax异步上传图片
//返回的filename类似 front/a.jpg
$.ajax({
url : '',
type : 'POST',
data : formdata,

在form表单里上传图片的更多相关文章

  1. form表单里如果只存在一个文本框，enter键提交

    在这里说一说浏览器里form表单的默认行为 我们都知道浏览器是存在很多默认行为的,可能是出于常用行为考虑又或者是历史原因.但有时候我们不需要这些默认行为.以下: 1).当form表单里只存在一个inp ...

  2. php form表单ajax上传图片方法

    form表单ajax上传图片方法 先引用jquery.form.js 前台代码<pre><form id="form1"> <input id=&qu ...

  3. ant-pro使用Form表单验证上传图片出现的问题

    1.复现:用antd的Form表单验证上传图片必填项时出现问题:复现过程,先提交,提示图片需要上传,上传成功后,依旧提示:图片未上传 2.表单验证原理:先理解一下antd的Form表单验证的表层原理, ...

  4. form表单里的button调用js函数

    近来发现一个特别奇怪的问题:在form表单里,button的onclick事件无法调用js函数.代码如下(这段代码放在form标签里): dropUpdateAddress调用的js函数为: 这个时候 ...

  5. 标签form表单里的属性简单介绍了一下

    <form id="form1" name="form1" method="post" action=""> ...

  6. form表单里的故事

    <form class="m-t" role="form" action='javascript:;'> <div class="f ...

  7. 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)

    问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...

  8. JS中 submit提交与Form表单里的onsubmit的调用问题？

    最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,在提交前触发这个button的onclick事件,在其事件中触发form的submit事件.问题出现了: &l ...

  9. 同一个form里，不管哪个 submit 都是直接提交form表单里的内容

    要达到你的目的,就不能用类型为 submit 的按钮,要用 button,然后加onclick 方法来自定义预处理参数,然后再调用 submit 方法提交表单,比如 <script type=& ...

随机推荐

  1. Task: Indoor Positioning with WiFi Signals

    Task: Indoor Positioning with WiFi SignalsYou are hired by a company to design an indoor localizatio ...

  2. Introducation of Servlet filter（servlet过滤器介绍 ）

    本文章向大家介绍Servlet Filter,主要包括 Servlet Filter使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下. 过滤器是一个可以转换 ...

  3. 实验9-1 编写一个存储过程proc_test_func

    在TestDB数据库中,编写一个存储过程proc_test_func,要求如下: 1)输入参数 一个整型的输入参数 @value 2)要求在一个select语句返回: @value的绝对值, 此绝对值 ...

  4. 关于Redis处理高并发

    Redis的高并发和快速原因 1.Redis是基于内存的,内存的读写速度非常快: 2.Redis是单线程的,省去了很多上下文切换线程的时间: 3.Redis使用多路复用技术,可以处理并发的连接.非阻塞 ...

  5. Vue开发与调试工具

    vscode: Visual Studio Code https://code.visualstudio.com/Download 可以下载各个版本的,Windows/ Debian /Mac 等 W ...

  6. Python交互K线工具 K线核心功能+指标切换

    Python交互K线工具 K线核心功能+指标切换 aiqtt团队量化研究,用vn.py回测和研究策略.基于vnpy开源代码,刚开始接触pyqt,开发界面还是很痛苦,找了很多案例参考,但并不能完全满足我 ...

  7. 注入（injector）

    在java开发中有时候我们的一个类需要依赖另外一个类,这种就是依赖关系,创建对象的工作一般由spring容器来完成然后注入给调用者,这种就是依赖注入. Java依赖注入设计原则允许我们移除硬编码依赖和 ...

  8. 数据库-left join，right join，inner join，full join

    2019-04-18 22:36:26 sql中的连接查询有inner join(内连接).left join(左连接).right join(右连接).full join(全连接)四种方式,它们之间 ...

  9. 2018-2019-2 20175317 实验二《Java面向对象程序设计》实验报告

    2018-2019-2 20175317 实验二<Java面向对象程序设计>实验报告 一.实验步骤及内容 面向对象程序设计-1 参考 http://www.cnblogs.com/roce ...

  10. Python自学:第三章 动手试一试 3-4、3-5

    # -*- coding: GBK -*- liebiao = ["zhang", "li", "wang", "zhou&quo ...