ajax上传图片存入到指定的文件夹并回显

要使用AJAX上传图片并将其存储到服务器上的指定文件夹，并在上传后立即回显图片，你可以使用以下步骤和示例代码：

1. 前端HTML和JavaScript代码：

<form id="uploadForm">
    <input type="file" name="image" id="image" />
    <input type="button" value="上传" onclick="uploadImage()" />
</form>
<div id="imageContainer">
    <!-- 图片回显将在这里 -->
</div>
 
<script>
function uploadImage() {
    var formData = new FormData();
    var imageFile = document.getElementById('image').files[0];
    formData.append('image', imageFile);
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php', true);
 
    xhr.onload = function() {
        if (this.status == 200) {
            // 假设服务器返回图片URL
            var imageUrl = JSON.parse(this.responseText).imageUrl;
            // 在页面上显示图片
            document.getElementById('imageContainer').innerHTML = '<img src="' + imageUrl + '" />';
        }
    };
 
    xhr.send(formData);
}
</script>

2. 服务器端PHP代码 (upload.php)：

<?php
$targetDir = "uploads/"; // 指定文件夹
$targetFile = $targetDir . basename($_FILES["image"]["name"]);
 
// 检查文件大小
if ($_FILES["image"]["size"] > 500000) {
    echo json_encode(array("error" => "文件太大。"));
    exit;
}
 
// 允许的文件格式
$allowedTypes = array("image/jpeg", "image/png", "image/jpg");
if (!in_array($_FILES["image"]["type"], $allowedTypes)) {
    echo json_encode(array("error" => "只允许JPEG, JPG, PNG格式的图片。"));
    exit;
}
 
// 检查文件是否上传成功
if (!move_uploaded_file($_FILES["image"]["tmp_name"], $targetFile)) {
    echo json_encode(array("error" => "上传失败。"));
} else {
    // 返回图片URL
    $imageUrl = "http://" . $_SERVER['HTTP_HOST'] . dirname($_SERVER['SCRIPT_NAME']) . '/' . $targetFile;
    echo json_encode(array("imageUrl" => $imageUrl));
}
?>

确保服务器上的指定文件夹（在这个例子中是 "uploads/"）存在并且有写入权限。这段代码会将图片上传到服务器的指定文件夹，并返回图片的URL，然后前端JavaScript会将图片回显在页面上。