怎么用异步ajax提交表单来上传图片文件？

最新推荐文章于 2022-05-09 15:10:09 发布

原创最新推荐文章于 2022-05-09 15:10:09 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#图片上传 #ajax

php 同时被 2 个专栏收录

40 篇文章

订阅专栏

JavaScript

26 篇文章

订阅专栏

这篇博客介绍了如何使用异步AJAX技术提交表单上传图片文件。内容包括HTML表单设置，如需添加`enctype="multipart/form-data"`和`type="file"`的输入字段，以及使用jQuery或Zepto.js进行AJAX提交的注意事项，强调老版本jQuery可能不支持此功能。

通常我们提交（使用submit button）时，会把form中的所有表格元素的name与value组成一个queryString，提交到后台。这用jQuery的方法来说，就是serialize。

通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。

但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。

不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传

1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片上传测试</title>
</head>
<body>
	<form id="form" action="" method="post" enctype="multipart/form-data">

		<input type="text" name="ss" value="kk">
		<input type="text" value="kk">
		<input type="text" value="kk">
		<input type="file" name="img" value id="b">
		<input type="button" id="submit" value="点击提交">
	</form>
</body>
</html>
<!-- <script src="../js/zepto.min.js"></script> -->
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
	console.log($);
	$("#submit").click(function(){
		var data = new FormData($("#form")[0]);
	console.log(data);
		$.ajax({
			type:'post',
			url:'addImg_do.php',
			data:data,
			processData: false,
			contentType: false,
			success:function(res){
				console.log('success------------');
				console.log(res);
			}
		});

	});
})
</script>

2.php服务端处理接收

<?php
@$dd = $_REQUEST['ss'] or die ('{"code":204,"msg":"ss is required"}');
  	$src = $_FILES['img'];
	 var_dump($src);
	 var_dump($dd);

    // $name = $_FILES['img']['name'];

?>

打印出结果

success------------
(index):39 array(5) {
  ["name"]=>
  string(6) "dd.jpg"
  ["type"]=>
  string(10) "image/jpeg"
  ["tmp_name"]=>
  string(24) "C:\xampp\tmp\php1722.tmp"
  ["error"]=>
  int(0)
  ["size"]=>
  int(41364)
}
string(2) "kk"

其中

processData: false,
			contentType: false,

这两个参数不能少一个。

form中必须要有:enctype="multipart/form-data",input中type设置为file

表单中enctype="multipart/form-data"的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据，进行下面的操作.

enctype="multipart/form-data"是上传二进制数据; form里面的input的值以2进制的方式传过去。

另外：这里使用JQuery，但是老版本的JQuery比如1.2是不支持的，最好使用2.0以上或更新版本：

zepto.js也可以

怎么用异步ajax提交表单来上传图片文件？

3 条评论