AJAX上传图片

最新推荐文章于 2025-06-07 14:38:43 发布

转载最新推荐文章于 2025-06-07 14:38:43 发布 · 635 阅读

文章标签：

#ajax #jquery #ajax上传文件 #upload #图片

web 同时被 2 个专栏收录

4 篇文章

订阅专栏

坑与跳坑

3 篇文章

订阅专栏

本文介绍如何利用Ajax和jQuery实现图片上传功能，并在上传过程中进行预览。通过使用formData对象，可以将图片文件通过Ajax发送到服务器端。服务器端采用PHP处理上传的图片，并返回上传状态及图片路径。

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

ajax上传图片

图片时一般要做下预览,需要分步先提交图片,但一般的ajax提交不能够完成文件的上传,这时我们就需要借助jquery的formData 这一对象来完成文件的上传(引入jquery.form.js).

html代码

<html>
<head>
<title>AJAX Upload Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<style>
	#imgbox{width:1200px;margin:0 auto;}
	#imgbox img{float:left;width:300px;height:300px;}	
</style>
</head>
<body>
<div>
<form id="submit_form" method="post" action="" enctype="multipart/form-data">
	<input type="file" name="upload_file" id="upload_file">		
	<input type="text" name="test_text" id="test_text" value="test">
	<input type="submit"  value="确定">			
</form>
<div id="imgbox">
	<img src=""  id="imgs" >	
</div>
</div>	
<script type="text/javascript">
	 $("#submit_form").submit(function(){
		 if($("#upload_file").val()==''){
			 alert("请选择要上传的文件");
			 return false;
		 }
		var formData =  new FormData($("#submit_form")[0]);
		// console.log(formData);return false;
		 $.ajax({
			debug:true,
			url:'upload.php',
			type: 'POST',
			async: false,
			cache: false,
			data:formData,
			processData: false,
			contentType: false,
			dataType:"json",
			beforeSend: function(){
				uploading = true;
			},
			success : function(data) {
				if (data.status == 1) {
					$("#imgs").attr("src", data.src);
				} else {
					alert("上传出错");
					return false;
				}
				uploading = false;
			}
		 })
		 return false;
	 })
</script>
</body>
</html>

php代码(upload.php)

<?php
	// var_dump($_POST);
	// var_dump($_FILES);
	// var_dump($_FILES['upload_file']);
if (file_exists("upload/" . $_FILES["upload_file"]["name"])){
	// echo $_FILES["file"]["name"] . " already exists. ";
	echo json_encode(['status'=>0,'msg'=>"上传失败"]);exit;			
}else{
	$test=move_uploaded_file($_FILES["upload_file"]["tmp_name"],"upload/" . $_FILES["upload_file"]["name"]);
	if($test){
		echo json_encode(['status'=>1,'src'=>"upload/" . $_FILES["upload_file"]["name"]]);exit;
	}else{
		echo json_encode(['status'=>0,'msg'=>"上传失败"]);exit;		
	}
}

源文件地址:upload_ajax_img
参考文章:
1.http://yunzhu.iteye.com/blog/2177923
2.https://www.cnblogs.com/zzgblog/p/5417969.html
3.http://blog.csdn.net/inuyasha1121/article/details/51915742