java ajax动态上传多个文件

硅谷探秘者 2363 0 1

后端这么写

package cn.com.dzqc.controller;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import cn.com.dzqc.util.MyAjaxResult;

@Controller
@RequestMapping("/apply")
public class ApplyController {
	
	@RequestMapping("/toapply")
	public String toapply() {
		return "apply";
	}
	
	@RequestMapping(value="/apply",produces = "application/json")
	@ResponseBody
	public MyAjaxResult apply(HttpServletRequest request, Integer userId,String newUserName,
			String newUserPhone,String code,String remarks,
			@RequestParam(value="zj") MultipartFile[] zj,
			@RequestParam(value="sfzzm") MultipartFile sfzzm,
			@RequestParam(value="sfzfm") MultipartFile sfzfm) {
		System.out.println("***********************************");
		System.out.println("一般参数:"+userId);
		System.out.println("一般参数:"+newUserName);
		System.out.println("一般参数:"+newUserPhone);
		System.out.println("一般参数:"+code);
		System.out.println("一般参数:"+remarks);
		System.out.println("文件数组:"+zj);
		System.out.println("单个文件:"+sfzzm);
		System.out.println("单个文件:"+sfzfm);
		System.out.println("***********************************");
		if(zj!=null) {
			System.out.println("文件数组长度:"+zj.length);
		}
		
		return MyAjaxResult.success("上传成功");
	}
}

前端这么写(jsp)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>apply</title>
<script type="text/javascript" src="${path}/resources/js/jquery-3.2.1.js"></script>
</head>
<body>
	<form action="" method="post">
		新户主姓名:<input type="text" name="newUserName" id="username" value="name"><br>
		新户主手机:<input type="text" name="newUserPhone" id="phone" value="phone"><br>
		验证码:<input type="text" name="code" id="code" value="code"><br>
		备注:<input type="text" name="remarks" id="remarks" value="remarks"><br>
		<input type="hidden" name="userId" id="userId" value="1"><br>
		身份证正面:<input type="file" name="sfzzm" id="sfzzm"><br>
		身份证反面:<input type="file" name="sfzfm" id="sfzfm"><br><br>
		其他证件:<span id="zj">
			<input type="file" name="zj" class="zj">
			<input type="file" name="zj" class="zj">
		</span><a id="add" style="cursor:pointer">添加文件</a>
		<br>
		<input type="button" id="submit" value="提交">
	</form>
	
	<script type="text/javascript">
	
	$(function(){
	    $("#submit").click(function(){
			var formData = new FormData();
		    formData.append("newUserName",$("#username").val());
		    formData.append("newUserPhone",$("#phone").val());
		    formData.append("userId",$("#userId").val());
		    formData.append("remarks",$("#remarks").val());
		    formData.append("code",$("#code").val());
		    formData.append('sfzzm',document.getElementById("sfzzm").files[0]);
		    formData.append('sfzfm',document.getElementById("sfzfm").files[0]);
		    var filess=document.getElementsByName('zj');
		    console.log(document.getElementById("sfzfm").files[0]);
		    for(var i=0;i<filess.length;i++){
		    	console.log(filess[i]);
			    formData.append('zj',filess[i].files[0]);
		    }
		    $.ajax({
		        url : "${path}/apply/apply",
		        type : 'POST',
		        data : formData,
		        processData : false,
		        contentType : false,
			    cache: false
		    }).done(function(res) { //回调函数
				console.log(res)
			}).fail(function(res) { 
				console.log(res)
			});
	    })
	    
	    ////动态添加文件
	    $("#add").click(function(){
	    	console.log("2")
	    	$("#zj").append("<input type='file' name='zj' class='zj'>");
	    })
	})
	
	</script>
</body>
</html>

提交

1562468816713063590.png

后端

20180919225940384.png

 

猜你喜欢
工具 1712 服务端(接受) /** *接口 *@paramtype *@return */ @RequestMapping(value="/upFile",method
minio 2019 创建buckets 创建serviceaccounts java maven依赖: dependency groupIdio.minio/groupId
工具 2270 pom依赖dependencygroupIdcommons-net/groupIdartifactIdcommons-net/artifactIdversion3.6/version/dependencyFTP服务类packageclub.jiajiajia.bulider.service;importjava.io.IOException;importjava.io.InputStream;im
java springboot 1575 涉及知识点:java编译,java反射,io流,java操作,输入输出重定向,线程与线程安全,mysql数据库设计等,理解起来难度较高。下面是我自己设计的几问题,和一些测试数据。排序问题
框架 1893 springboot与回显资源映射路径配置:packagecom.dzqc.yx.controller
java基础 2351 java代理示例packageclub.jiajiajia.test.staticproxy;publicinterfaceBuyHouse{voidbuyHosue();//买房子
工具 2312 java代码response.setHeader("Content-Length",""+file.length());
其他 3405 1.编译技术从JDK1.6开始引入了用Java代码重写的编译器接口,使得我们可以在运行时编译Java源码,然后用类加载器进行加载,让Java语言更具灵活性,能够完成许高级的操作。2.本次要实现
归档
2018年11月  12 2018年12月  33 2019年01月  28 2019年02月  28 2019年03月  32 2019年04月  27 2019年05月  33 2019年06月  6 2019年07月  12 2019年08月  12 2019年09月  21 2019年10月  8 2019年11月  15 2019年12月  25 2020年01月  9 2020年02月  5 2020年03月  16 2020年04月  4 2020年06月  1 2020年07月  7 2020年08月  13 2020年09月  9 2020年10月  5 2020年12月  3 2021年01月  1 2021年02月  5 2021年03月  7 2021年04月  4 2021年05月  4 2021年06月  1 2021年07月  7 2021年08月  2 2021年09月  8 2021年10月  9 2021年11月  16 2021年12月  14 2022年01月  7 2022年05月  1 2022年08月  3 2022年09月  2 2022年10月  2 2022年12月  5 2023年01月  3 2023年02月  1 2023年03月  4 2023年04月  2 2023年06月  3 2023年07月  4 2023年08月  1 2023年10月  1
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础 xxl-job rabbitmq haproxy srs 音视频 webrtc javascript
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。