需要上传多个图片分别上传，本来提供的工具类里上传一张可以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. ASUS RT-N16 使用OpenWrt 安装 ss记录

    本文用于记录一下使用ASUS RT-N16 使用OpenWrt 安装 shadowsocks的过程. 前后一共折腾了一个星期,原先使用的是tomato固件,但是在配置iptables的过程中,执行 r ...

  2. Linux Postfix 服务

    Linux Postfix 服务 postfix是Wietse Venema在IBM的GPL协议之下开发的MTA(邮件传输代理)开源软件.能够很好地兼容 Sendmail服务程序,可以方便 Sendm ...

  3. 面试官问我“Java中的锁有哪些？以及区别”，我跪了

    在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类.介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏向锁/轻量级 ...

  4. Oracle错误——ORA-39002:操作无效、ORA-39070:无法打开日志文件、ORA-06512:在“SYS.UTL_FILE”,line

    错误 在使用数据泵impdp导入文件时,出现错误,无法导入数据 Next 问题原因 初步猜测,应该是Oracle用户权限出现问题,是对Directory目录无操作权限所致,经过一番修改和测试,发现使用 ...

  5. Visual Studio 禁用诊断工具

    这里以 Visual Studio 2019 为例 调试 - 选项 调试 - 常规 - 禁用调试时启用诊断工具

  6. bzoj 3513: [MUTC2013]idiots FFT

    bzoj 3513: [MUTC2013]idiots FFT 链接 bzoj 思路 参考了学姐TRTTG的题解 统计合法方案,最后除以总方案. 合法方案要不好统计,统计不合法方案. \(a+b< ...

  7. Maven下载与环境变量配置

    前言: Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK.如果还未安装 JDK,可以参考Win10下JDK下载与环境变量配置. 项目 要求 JDK Maven 3.3+ ...

  8. GIT导出差异版本更新的文件列表

    之前写了一篇SVN导出差异版本更新的文件列表 这次写git如何导出差异化版本文件列表 查找了一番,发现git diff这个命令 $ git diff 2da595c daea1d6 --name-on ...

  9. highcharts数据标签显示在柱状图里面解决办法

    1.现象:当各项占比相同时,数据显示在柱状图里面 2.解决方法: 3.效果

  10. Wannafly挑战赛1 C MMSet2 虚树

    题目链接:https://www.nowcoder.com/acm/contest/15/C 思路:虚树,取两点间的lca,构造成一颗新的树:求(直径+1)/2即可 #pragma comment(l ...