AJAX+PHP上传图片，Jquery无刷新上传图片

TANKING-

于 2021-05-31 11:31:51 发布

阅读量391

点赞数

分类专栏：前端 PHP 文章标签： javascript php ajax 图片上传上传文件

本文链接：https://blog.csdn.net/weixin_39927850/article/details/117413234

版权

PHP 同时被 2 个专栏收录

75 篇文章 4 订阅

订阅专栏

前端

45 篇文章 3 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
<head>
	<title>AJAX上传图片</title>
	<meta charset="utf-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
	<h1>AJAX上传图片</h1>

	<!-- 表单 -->
	<form id="imgform" enctype="multipart/form-data">
		<div id="select_file">
			选择图片文件
			<input type="file" id="imgselect" name="file"/>
		</div>
	</form>

	<!-- 上传结果 -->
	<div id="imgdiv" style="width: 300px;"><div>

	<!-- 获取文件名 -->
	<script type="text/javascript">
	$("#imgselect").change(function(e){
		// 获取点击的控件
		var files = e.target.files;
		// 判断是否已经选择了图片
		if(files.length>0){
			// 获取文件名
			var fileName = files[0].name;
			// 获取表单数据
			var image = new FormData(document.getElementById("imgform"));
			// AJAX上传图片
			$.ajax({
				url:"upload.php",
				type:"post",
				data:image,
				cache: false,
				processData: false,
				contentType: false,
				success:function(data){
					if (data.code == "200") {
						$("#imgdiv").html("<img src='"+data.url+"' width='300'/>");
					}
					// 上传成功后，清空选择的文件
					$("#imgselect").val("");
				},
				error:function(data){
					alert("上传失败，请检查服务器通讯状态和上传文件权限。");
				}
			})
		}
	})
	</script>
</body>
</html>

upload.php

<?php
// 返回JSON格式的文件类型
header("Content-type:application/json");
 
// 获取原始文件名
$file = $_FILES["file"]["name"];
 
// 获取文件后缀名
$hzm = substr($file,strpos($file,"."));
 
// 重命名文件
// 重命名组成规则：当前日期+当前时间戳
$newfile = date('Y-m-d').'-'.time().$hzm;
 
// 允许上传的图片后缀
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $file);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 5242880)
&& in_array($extension, $allowedExts)){
    // 如果上传的文件类型在以上数组中
    if ($_FILES["file"]["error"] > 0){
        // 如果错误码>0则上传发生错误
        $result = array(
            'code' => '202',
            'msg' => '上传文件发生错误，错误原因：'.$_FILES["file"]["error"]
        );
    }else{
        // 否则上传正常
        // 判断是否存在upload目录
        $filepath="upload";
        if (is_dir($filepath)){
            // 目录存在
            // 将文件上传到这个目录
            move_uploaded_file($_FILES["file"]["tmp_name"],$filepath."/".$newfile);
            // 获取服务器域名和当前程序所在目录的URL
            $SERVER = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER["REQUEST_URI"];
            $url = dirname($SERVER).'/'.$filepath.'/'.$newfile;
            $result = array(
                'code' => '200',
                'msg' => '上传成功',
                'url' => $url
            );
        }else{
            // 目录不存在
            // 创建目录
            $creatfilepath = mkdir(iconv("UTF-8", "GBK", $filepath),0777,true);
            // 获取服务器域名和当前程序所在目录的URL
            $SERVER = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER["REQUEST_URI"];
            $url = dirname($SERVER).'/'.$filepath.'/'.$newfile;
            if ($creatfilepath) {
                // 目录创建成功
                $result = array(
                    'code' => '200',
                    'msg' => '上传成功',
                    'url' => $url
                );
                // 将文件上传到这个目录
                move_uploaded_file($_FILES["file"]["tmp_name"],$filepath."/".$newfile);
            }else{
                // 目录创建失败
                $result = array(
                    'code' => '203',
                    'msg' => $filepath.'目录创建失败，请重试或手动创建目录！'
                );
            }
        }
    }
}else{
    // 如果上传的文件类型不在以上数组中
    $result = array(
        'code' => '201',
        'msg' => '不允许上传此类文件'
    );
}

// 输出JSON
echo json_encode($result,JSON_UNESCAPED_UNICODE);
?>

演示