formData多文件+表单ajax上传，后台接收不到数据解决方案_ajax formdata上传图片,php后端无法接收-CSDN博客

本文介绍了使用formData进行多文件和表单数据的AJAX上传时遇到后台接收不到数据的问题，提供了一个案例，包括HTML、JavaScript代码示例，并特别指出在ThinkPHP5环境下可能存在的session过期导致的临时文件无法自动删除的bug，以及问题的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

formData多文件ajax上传，后台接收不到数据解决方案

看案例

1.HTML代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="layui-v2.4.3/layui/css/layui.css">
</head>

<body>
	<form class="layui-form" enctype="multipart/form-data" method="post" autocomplete="off">
		<table class="layui-table">
			<caption>项目的实施</caption>
			<tbody>
				<tr>
					<td class="tdd">项目名称</td>
					<td colspan="2"><input type="text" class="layui-input" name="title" lay-verify="required"></td>
				</tr>
				<tr>
					<td style="width: 160px">服务时间</td>
					<td>服务内容（包括活动目的，形式，地点，参与人数等）</td>
					<td style="width: 50px">文件上传</td>
				</tr>
				<tr>
					<td class=""><input type="text" class="layui-input" name="service_time" id="project_cycle3" lay-verify="required"></td>
					<td><textarea name="content" lay-verify="article_desc" id="demo_content" placeholder="请输入" class="site-demo-layedit"></textarea></td>
					<!-- 没有给file的name值，防止重复提交 -->
					<td><input type="file" id="filess" multiple><span>文件最大只支持8m</span></td>
				</tr>
				<tr class="none_back">
					<td colspan="3">
						<button class="layui-btn site-demo-active" lay-submit lay-filter="submit_ajax">立即提交</button>
					</td>
				</tr>
			</tbody>
		</table>
	</form>

2.javascript代码

<script src="layui-v2.4.3/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script>
		layui.use(['form', 'layer', 'laydate', 'layedit'], function() {
			var form = layui.form,
				layer = layui.layer,
				laydate = layui.laydate,
				layedit = layui.layedit; //官方文档2.x没有富文本介绍，实际是可以使用的，文档可以看1.x
			var demo_content = layedit.build('demo_content'); //初始化编辑器
			laydate.render({
				elem: '#project_cycle3',
				type: 'month',
				trigger: 'click', // 新增这一行以解决
				range: '~',
				theme: 'grid' //（格子主题）
			}); //初始化日历
			form.on('submit(submit_ajax)', function(data) {
				//console.log(data.field) //layui封装的，当前容器的全部表单字段，名值对形式：{name: value}
				var index1 = layer.load(0, {
					shade: false
				});
				// 单击之后提交按钮不可选,防止重复提交：增加样式，增加属性
				$('.site-demo-active').addClass('layui-btn-disabled');
				$('.site-demo-active').attr('disabled', 'disabled');
				layedit.sync(demo_content); //用于同步编辑器内容到textarea（一般用于异步提交）
				//因为有其他表单元素的文件上传，不能使用构造方法传form表单元素，要使用append单独赋值（两天后换成FormData(data.form)又可以使用）
				//控制台是不能打印formData，因为它是私有字段，外界访问不到（get可以获取).
				var formData = new FormData();
				for (var i in data.field) {
					formData.append(i, data.field[i]);
				}
				var oFiles = $("#filess").get(0).files;
				// 遍历图片文件列表，插入到表单数据中
				for (var i = 0, file; file = oFiles[i]; i++) {
					formData.append('files[]', file); // 文件名称，文件对象，之前files['+ i +']不能用，两天后又可以用了
				}
				$.ajax({
					type: 'post',
					url: "{:url('Welfare/project')}",
					data: formData,
					processData: false, //默认为true，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
					contentType: false, // ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。
					success: function(res) {
						if (res.isSuccess) {
							layer.msg(res.msg, {
								shade: '#fefefe',
								icon: 1,
								time: 2000
							}, function() {
								window.parent.location.reload();
							});
						} else {
							layer.close(index);
							layer.msg(res.msg, {
								shade: '#fefefe',
								icon: 2,
								time: 2000
							});
						}
					}
				});
				return false; //防止跳转
			});
		});
	</script>

3.后台正常处理

后台我用的是thinkphp5，thinkphp5有bug，session过期，文件上传临时文件都不能自动删除，上述写法能成功，我自己测试的没有问题，但之前不能用的方法两天后我又测试，又可以用了，真是搞不明白。