PHP能否将文件Data URI存入数据库？现有代码故障求助

我是后端开发新手，正在用PHP开发后端应用，需要将文件以Data URI格式而非常规方式上传至数据库，但当前代码无法运行，求帮忙排查问题。

用户提供的原始代码：

<!DOCTYPE html>
<html>
<head><title>PHP FileUploader</title></head>
<body>

<form method="POST">
<!-- The Visible form : -->
<table>
    <tr><td>The name of file :</td><td><input type="text" id="FileNameInput" placeholder="Enter your File Name.."/></td></tr>
    <tr><td>The description of file :</td><td><textarea id="FileDescInput" placeholder="Enter your File Description.."</textarea></td></tr>
    <tr><td>The file :</td><td><input type="file" id="FileInput"/></td></tr>
</table>

<!-- The invisible Form : -->
<div style="display:none;">
<input id="FileNameSubmit" name="FileName" />
<textarea id="FileDescSubmit" name="FileDesc" />
<textarea id="FileSubmit" name="File"> </textarea>
</div>

<button type="submit" id="submitButton">Submit new Data</button>

<script>
var fileReader
document.getElementById('submitButton').onclick = ()=>{
    document.getElementById('FileNameSubmit').value = document.getElementById('FileNameInput').value
    document.getElementById('FileDescSubmit').value = document.getElementById('FileDescInput').value

document.getElementById('FileInput').onchange = ()=>{
fileReader = new FileReader()
fileReader.readAsDataURL(document.getElementById('FileInput').files[0])
fileReader.onload = ()=>{
document.getElementById('FileSubmit').value = fileReader.result
}
}

<?php
$username = "root" ;
$password = "" ;
$database = new PDO("mysql:host=localhost;dbname=files;charset=utf8;",$username,$password) ;
if($database){echo "<script>console.log('connected successfully to database !')</script>";}

$command = $database->prepare("INSERT INTO file(name,description,file) VALUES(:name, :desc, :file);") ;

$command->bindParam("name" , $_POST("FileName"));
$command->bindParam("desc" , $_POST("FileDesc"));
$command->bindParam("file" , $_POST("File"));

$command->execute() ;
?>
}
</script>

</form>

</body>

代码中的核心问题 #

• 前后端代码执行逻辑混乱：PHP是服务器端代码，页面加载时就会执行，你把它写在JavaScript的onclick事件里，导致页面一加载就触发数据库插入，此时表单还没提交，$_POST数据为空。
• JavaScript事件绑定错误：在提交按钮的点击事件里才绑定文件选择的onchange事件，这时候表单已经开始提交，根本来不及把Data URI写入隐藏字段。
• PHP数组调用错误：$_POST是数组，应该用$_POST['FileName']而非$_POST("FileName")。
• HTML标签语法错误：<textarea id="FileDescInput"未闭合，缺少>。
• 无错误处理机制：PDO操作未捕获异常，无法定位插入失败的原因。

修正后的实现方案 #

推荐方案：前后端分离 #

把前端页面和PHP处理逻辑分开，更清晰易维护。

前端页面（index.html）

<!DOCTYPE html>
<html>
<head><title>PHP FileUploader</title></head>
<body>
<form id="fileUploadForm" method="POST" action="upload.php">
    <table>
        <tr><td>文件名:</td><td><input type="text" id="FileNameInput" placeholder="输入文件名.."/></td></tr>
        <tr><td>文件描述:</td><td><textarea id="FileDescInput" placeholder="输入文件描述.."></textarea></td></tr>
        <tr><td>选择文件:</td><td><input type="file" id="FileInput"/></td></tr>
    </table>

    <div style="display:none;">
        <input id="FileNameSubmit" name="FileName" />
        <textarea id="FileDescSubmit" name="FileDesc"></textarea>
        <textarea id="FileSubmit" name="File"></textarea>
    </div>

    <button type="submit">提交数据</button>
</form>

<script>
const fileInput = document.getElementById('FileInput');
const fileSubmit = document.getElementById('FileSubmit');
const form = document.getElementById('fileUploadForm');

// 选择文件时立即转换为Data URI
fileInput.addEventListener('change', function() {
    if (!this.files.length) return;
    const reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload = () => fileSubmit.value = reader.result;
});

// 提交前同步表单数据
form.addEventListener('submit', function(e) {
    document.getElementById('FileNameSubmit').value = document.getElementById('FileNameInput').value;
    document.getElementById('FileDescSubmit').value = document.getElementById('FileDescInput').value;
    
    if (!fileSubmit.value) {
        e.preventDefault();
        alert('请先选择文件！');
    }
});
</script>
</body>
</html>

后端处理文件（upload.php）

<?php
// 数据库连接
try {
    $database = new PDO("mysql:host=localhost;dbname=files;charset=utf8;", "root", "");
    $database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die("数据库连接失败: " . $e->getMessage());
}

// 处理POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (empty($_POST['FileName']) || empty($_POST['File'])) {
        die("文件名和文件内容不能为空！");
    }

    try {
        $stmt = $database->prepare("INSERT INTO file(name, description, file) VALUES(:name, :desc, :file);");
        $stmt->bindParam(":name", $_POST['FileName']);
        $stmt->bindParam(":desc", $_POST['FileDesc']);
        $stmt->bindParam(":file", $_POST['File']);
        
        $stmt->execute();
        echo "文件上传保存成功！";
    } catch(PDOException $e) {
        die("数据插入失败: " . $e->getMessage());
    }
}
?>

备选方案：单文件混写（适合快速测试） #

如果想保留单文件结构，需把PHP代码放在页面最顶部处理提交请求：

<?php
$msg = "";
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    try {
        $db = new PDO("mysql:host=localhost;dbname=files;charset=utf8;", "root", "");
        $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        if (empty($_POST['FileName']) || empty($_POST['File'])) {
            $msg = "文件名和文件内容不能为空！";
        } else {
            $stmt = $db->prepare("INSERT INTO file(name, description, file) VALUES(:name, :desc, :file);");
            $stmt->bindParam(":name", $_POST['FileName']);
            $stmt->bindParam(":desc", $_POST['FileDesc']);
            $stmt->bindParam(":file", $_POST['File']);
            
            $stmt->execute();
            $msg = "文件上传保存成功！";
        }
    } catch(PDOException $e) {
        $msg = "操作失败: " . $e->getMessage();
    }
}
?>
<!DOCTYPE html>
<html>
<head><title>PHP FileUploader</title></head>
<body>
<?php if ($msg): ?>
    <p><?php echo $msg; ?></p>
<?php endif; ?>
<form id="fileUploadForm" method="POST">
    <table>
        <tr><td>文件名:</td><td><input type="text" id="FileNameInput" placeholder="输入文件名.."/></td></tr>
        <tr><td>文件描述:</td><td><textarea id="FileDescInput" placeholder="输入文件描述.."></textarea></td></tr>
        <tr><td>选择文件:</td><td><input type="file" id="FileInput"/></td></tr>
    </table>

    <div style="display:none;">
        <input id="FileNameSubmit" name="FileName" />
        <textarea id="FileDescSubmit" name="FileDesc"></textarea>
        <textarea id="FileSubmit" name="File"></textarea>
    </div>

    <button type="submit">提交数据</button>
</form>

<script>
const fileInput = document.getElementById('FileInput');
const fileSubmit = document.getElementById('FileSubmit');
const form = document.getElementById('fileUploadForm');

fileInput.addEventListener('change', function() {
    if (!this.files.length) return;
    const reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload = () => fileSubmit.value = reader.result;
});

form.addEventListener('submit', function(e) {
    document.getElementById('FileNameSubmit').value = document.getElementById('FileNameInput').value;
    document.getElementById('FileDescSubmit').value = document.getElementById('FileDescInput').value;
    
    if (!fileSubmit.value) {
        e.preventDefault();
        alert('请先选择文件！');
    }
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者hasan darwish