ajax 提交图片,以及字符串,php后台接收

最新推荐文章于 2022-04-20 09:05:00 发布

原创

最新推荐文章于 2022-04-20 09:05:00 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax 多图片上传 #php 接收图片及字符串 #ajax FormData 提交多张图片和字符串属性 #ajax 提交File 图片

本文介绍了如何使用Ajax配合FormData，实现前端上传多张图片的同时，将字符串一起发送到PHP后台。PHP后台需要进行图片接收和处理。提供了具体的前端代码示例和PHP接收代码片段。

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

前端网页:

<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="js/jquery-2.1.0.js"></script>
	</head>

	<body>
		<!--最好不要超过5张,php接收文件大小的原因 -->
		<div id="picture_show"></div><br>
		<form action="pic2.php" method="post" id="form" enctype="multipart/form-data">

			<span class="file_parent">
	<!--去掉[] 单个上传 -->
    <input type="file" class="file" name="upload[]" accept="image/*"  id="upload" multiple="multiple" /><br>
	</span>     <input type="button" onclick="upload_form()" value="上传">     </form> 
		<div id="xdebug">
			</div>

	</body>
	<script>
		var formdata = new FormData();

		//清空图片
		function clearall() {
			var formdata = window.formdata;
			formdata.delete('upload[]');
		}

		//避免change事件绑定在input上失效
		$(".file_parent").on("change", "#upload", function() {
			var file_s = this.files;
                       //清除显示的图片
			$("#picture_show").empty();
			$.each(this.files, function() {
				var objUrl = getObjectURL(this);
				if(objUrl) {
					$("#picture_show").append('<img style="width: 160px; height: 170px; border: solid 1px #d2e2e2;" src=' + objUrl + ' />');
				}
			});
			changeFile(file_s);

		});

		function changeFile(file_s) {
			var formdata = window.formdata;
			clearall();

			//需要的话直接在这里压缩图片,修改图片都可以
			$(file_s).each(function(i, dom) {
				var file = $(this)[0];
                                //设置随机数+文件后缀作为新的文件名,避免重复覆盖
				var filename = Math.ceil(Math.random() * 10) + ".png";
				formdata.append(