java ajax动态上传多个文件

硅谷探秘者 1722 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

 

猜你喜欢
工具 1187 服务端(接受) /** *接口 *@paramtype *@return */ @RequestMapping(value="/upFile",method
minio 253 创建buckets 创建serviceaccounts java maven依赖: dependency groupIdio.minio/groupId
工具 1818 pom依赖dependencygroupIdcommons-net/groupIdartifactIdcommons-net/artifactIdversion3.6/version/dependencyFTP服务类packageclub.jiajiajia.bulider.service;importjava.io.IOException;importjava.io.InputStream;im
java springboot 1054 涉及知识点:java编译,java反射,io流,java操作,输入输出重定向,线程与线程安全,mysql数据库设计等,理解起来难度较高。下面是我自己设计的几问题,和一些测试数据。排序问题
框架 1487 springboot与回显资源映射路径配置:packagecom.dzqc.yx.controller
java基础 1661 java代理示例packageclub.jiajiajia.test.staticproxy;publicinterfaceBuyHouse{voidbuyHosue();//买房子
工具 1554 java代码response.setHeader("Content-Length",""+file.length());
其他 2617 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
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础
目录
余生别太较劲,放过自己 才会幸福。