基于AJAX和PHP实现大尺寸Base64图片上传教程

<div class="container">
    <h1>jQuery Image Upload 
        <small>with preview</small>
    </h1>
    <div class="avatar-upload">
        <div class="avatar-edit">
            <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
            <label for="imageUpload"></label>
        </div>
        <div class="avatar-preview">
            <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);">
            </div>
        </div>
    </div>
</div>
<input type='hidden' id='new_img' /> <!-- 建议使用hidden类型，避免用户看到长字符串 -->
<button type="button" class="button" onclick="
var new_img = document.getElementById('new_img').value;
var data={new_img : new_img}; saveimg(data);">Save Image</button>

// 当文件选择框内容改变时触发
$("#imageUpload").change(function() {
    readURL(this);
});

// 读取文件并显示预览
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            // 设置预览区域的背景图片为Base64字符串
            $('#imagePreview').css('background-image', 'url('+e.target.result +')');
            $('#imagePreview').hide();
            $('#imagePreview').fadeIn(650);
            // 将Base64字符串存储到隐藏的input字段中
            $('#new_img').val(e.target.result);
        }
        // 以Data URL的形式读取文件内容
        reader.readAsDataURL(input.files[0]);
    }
}

function saveimg(data) {
    var new_data = {
        new_img: data.new_img // 包含Base64图片数据的对象
    };

    // 使用$.ajax发送POST请求
    $.ajax({
        url: 'upload.php', // 后端处理脚本的URL
        data: new_data,    // 要发送的数据
        type: 'POST',      // 指定请求类型为POST
        success: function(response){
           // 请求成功后的回调函数
           alert("UPLOADED: " + response); // 显示服务器返回的响应
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // 请求失败后的回调函数
            alert("UPLOAD FAILED: " + textStatus + " - " + errorThrown);
        }
    });
}

<?php
// 检查请求方法是否为POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 从POST请求中获取Base64图片数据
    $new_img = $_POST["new_img"];

    // 验证数据是否为空
    if (empty($new_img)) {
        echo "Error: No image data received.";
        exit;
    }

    // Base64数据通常以 "data:image/jpeg;base64," 或类似前缀开始
    // 需要移除前缀以获取纯粹的Base64编码数据
    $data = $new_img;

    // 分割MIME类型和Base64数据
    @list($type, $data) = explode(';', $data);
    @list(, $data)      = explode(',', $data);

    // 检查分割是否成功
    if (empty($data)) {
        echo "Error: Invalid Base64 data format.";
        exit;
    }

    // 解码Base64数据
    $decoded_data = base64_decode($data);

    // 检查解码是否成功
    if ($decoded_data === false) {
        echo "Error: Base64 decode failed.";
        exit;
    }

    // 定义保存路径和文件名
    // 建议生成唯一文件名，避免覆盖
    $upload_dir = 'img/operators/';
    $file_name = 'image_' . uniqid() . '.jpg'; // 示例：生成唯一文件名
    $file_path = $upload_dir . $file_name;

    // 确保上传目录存在且可写
    if (!is_dir($upload_dir)) {
        mkdir($upload_dir, 0777, true); // 创建目录，并设置权限
    }

    // 将解码后的二进制数据写入文件
    if (file_put_contents($file_path, $decoded_data)) {
        echo "done: " . $file_name; // 返回成功消息和文件名
    } else {
        echo "Error: Failed to save image file.";
    }
} else {
    echo "Error: Invalid request method. Only POST requests are accepted.";
}
?>