前端图片预览与Base64字符串上传优化：解决大文件传输限制

function saveimg(data) {
    var new_data = { 
        new_img : data.new_img // new_img 包含了 Base64 字符串
    };
    $.getJSON('upload.php', new_data); // 使用 GET 请求
    alert("uploaded");
}

$new_img = $_GET["new_img"]; // 从 GET 参数中获取数据
// ... 后续处理

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#imagePreview').css('background-image', 'url('+e.target.result +')');
            $('#imagePreview').hide();
            $('#imagePreview').fadeIn(650);     
            $('#new_img').val(e.target.result); // 将 Base64 字符串存储到 input 字段
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#imageUpload").change(function() {
    readURL(this);
});

function saveimg(data) {
    var new_data = { 
        new_img : data.new_img // new_img 包含了 Base64 字符串
    };

    $.ajax({
        url: 'upload.php',
        data: new_data, // 数据通过请求体发送
        type: 'POST', // 指定为 POST 请求
        success: function(response){
           alert("上传成功！");
           console.log(response); // 打印服务器响应
        },
        error: function(xhr, status, error) {
            alert("上传失败：" + status + " - " + error);
            console.error("上传错误:", xhr.responseText);
        }
    });
}

<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>
<input type='hidden' id='new_img' /> <!-- 使用 hidden 类型更合适 -->
<button type="button" class="button" onclick="
    var new_img_val = document.getElementById('new_img').value;
    var data_to_send = {new_img : new_img_val}; 
    saveimg(data_to_send);
">保存图片</button>

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

    // 验证数据是否存在且非空
    if (empty($new_img)) {
        http_response_code(400); // Bad Request
        echo "错误：未接收到图片数据。";
        exit;
    }

    // Base64 字符串解码过程
    // 示例：data:image/jpeg;base64,/9j/4AAQSkZJRgABA...
    // 需要分离出类型和实际的 Base64 数据
    list($type, $data) = explode(';', $new_img);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);

    // 检查解码是否成功
    if ($data === false) {
        http_response_code(400); // Bad Request
        echo "错误：Base64 解码失败。";
        exit;
    }

    // 定义保存路径和文件名
    // 注意：实际应用中应生成唯一文件名，并进行安全检查
    $upload_dir = 'img/operators/';
    $filename = 'image_' . uniqid() . '.jpg'; // 生成唯一文件名
    $filepath = $upload_dir . $filename;

    // 确保上传目录存在且可写
    if (!is_dir($upload_dir)) {
        mkdir($upload_dir, 0777, true); // 递归创建目录
    }
    if (!is_writable($upload_dir)) {
        http_response_code(500); // Internal Server Error
        echo "错误：上传目录不可写。";
        exit;
    }

    // 将解码后的二进制数据写入文件
    if (file_put_contents($filepath, $data)) {
        echo "上传成功！文件已保存为：" . $filepath;
    } else {
        http_response_code(500); // Internal Server Error
        echo "错误：文件写入失败。";
    }
} else {
    http_response_code(405); // Method Not Allowed
    echo "错误：只允许 POST 请求。";
}
?>