HTML表单提交至PHP+MySQL失败：点击提交后空白无数据入库求助

核心问题排查 #

提交后空白页+数据未入库，主要由以下几个问题导致：

• 文件存放位置错误：XAMPP项目文件需放在htdocs目录下，而非MySQL文件夹
• PHP错误未显示：默认配置下PHP报错会隐藏，无法直观看到问题
• 文件上传处理错误：表单使用multipart/form-data编码，但PHP错误用$_POST['image']获取文件，而非专门的$_FILES数组
• HTML语法错误：存在未闭合标签、重复ID、拼写错误
• SQL绑定参数类型错误：image字段使用了错误的绑定类型b

分步修复 #

1. 修正文件存放位置 #

将HTML和PHP文件移动到XAMPP安装目录下的htdocs文件夹（例如C:\xampp\htdocs\report-app），访问时使用http://localhost/report-app/你的HTML文件名.html

2. 开启PHP错误显示（调试用） #

在PHP文件最顶部添加以下代码，直接显示报错信息：

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
// 后续代码...

3. 修复HTML语法错误 #

修正后的HTML代码：

<form action="con.php" method="POST" enctype="multipart/form-data">
    <div style="padding:20px 20px;">
        <h2>Personal Details</h2>
        <p>In this section, we would like you to provide your personal details.</p>
        
        <label for="name">Name:</label>
        <input type="text" name="fullname" placeholder="enter your fullname" data-theme="a" required/>
        <label for="PhoneNumber">Phone Number:</label>
        <input type="number" name="phonenumber" placeholder="enter your phone number" data-theme="a" required/>

        <label for="mail">E-Mail:</label>
        <input type="email" name="email" placeholder="enter your e-mail address" data-theme="a" required/>
        
        <div data-role="controlgroup" data-type="horizontal" data-mini="true">
            <h4>Gender</h4>
            <input type="radio" name="gender" value="f" id="gender-female" required/>
            <label for="gender-female">Female</label>
            <input type="radio" name="gender" value="m" id="gender-male" required/>
            <label for="gender-male">Male</label>
        </div>
        <h2>Description</h2>
        <p>Provide in detail the description of the case you are reporting and to where it took place.</p>
        <label for="location">Location</label>
        <input type="text" name="location" placeholder="enter where you are reporting from" data-theme="a" required/>
            
        <label for="title">Title:</label>
        <input type="text" name="title" id="title" placeholder="enter the title of the case you are reporting" data-theme="a" required/>
        <label for="textarea">Description:</label>
        <textarea cols="40" rows="8" name="description" id="textarea" placeholder="describe the case you are reporting" required></textarea>
        <div data-role="fieldcontain">
            <label for="picture">Upload a picture or a video file for evidence: </label>
            <input type="file" name="image" id="picture" required/>
        </div>
        
        <div data-role="fieldcontain">
            <label for="terms">Before you proceed, please read to Terms and Conditions applied. Click <a href="#page3">here</a> to read the terms and conditions</label>
            <select name="terms" id="terms" data-role="slider" data-mini="true">
                <option value="n">Deny</option>
                <option value="y">Agree</option>
            </select>
        </div>
       
    </div>
    <div data-role="fieldcontain">
        <input type="submit" name="register" value="Send"/>
    </div>
</form>

修正点：

• 移除controlgroup标签上无效的required属性
• 修正单选框重复ID问题，设置唯一ID
• 修复textarea标签闭合错误
• 修正data-role="fielcontain"拼写错误为fieldcontain
• 移除文件输入框重复的id="picture"
• 将邮箱输入框类型改为type="email"更规范
• 移除输入框内多余的value=""

4. 修复PHP逻辑错误（含文件上传处理） #

修正后的PHP代码：

<?php
// 开启错误显示，调试完成后可注释
error_reporting(E_ALL);
ini_set('display_errors', 1);

if(isset($_POST['register'])){
    // 获取表单数据
    $fullname = $_POST['fullname'];
    $phonenumber = $_POST['phonenumber'];
    $email = $_POST['email'];
    $gender = $_POST['gender'];
    $location = $_POST['location'];
    $title = $_POST['title'];
    $description = $_POST['description'];
    $terms = $_POST['terms'];

    // 处理文件上传
    $imageFileName = '';
    if(isset($_FILES['image']) && $_FILES['image']['error'] == 0){
        $uploadDir = 'uploads/';
        // 确保uploads目录存在，不存在则创建
        if(!is_dir($uploadDir)){
            mkdir($uploadDir, 0777, true);
        }
        // 生成唯一文件名避免覆盖
        $imageFileName = uniqid() . '_' . basename($_FILES['image']['name']);
        $targetPath = $uploadDir . $imageFileName;
        // 移动上传文件到目标目录
        if(!move_uploaded_file($_FILES['image']['tmp_name'], $targetPath)){
            die('文件上传失败');
        }
    } else {
        die('请选择有效的文件');
    }

    // 数据库连接
    $conn = new mysqli('localhost','root','','reportapp');

    // 检查连接
    if($conn->connect_error){
        die('数据库连接失败: ' . $conn->connect_error);
    }

    // 准备SQL语句，image字段存储文件名
    $stmt = $conn->prepare("INSERT INTO trials(fullname, phonenumber, email, gender, location, title, description, image, terms) 
                           VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)");
    // 绑定参数：s=字符串, i=整数，image为文件名用s
    $stmt->bind_param("sisssssss", $fullname, $phonenumber, $email, $gender, $location, $title, $description, $imageFileName, $terms);
    
    if($stmt->execute()){
        echo "案件提交成功.....";
    } else {
        echo "提交失败: " . $stmt->error;
    }

    $stmt->close();
    $conn->close();
}
?>

修正点：

• 新增文件上传处理逻辑，使用$_FILES获取文件，生成唯一文件名并存储到uploads目录
• 修正bind_param类型字符串，将b改为s（存储文件名而非二进制数据）
• 移除die()之后的无效echo语句
• 新增SQL执行错误反馈，方便排查问题
• 自动创建uploads目录，避免上传失败

最后验证 #

1. 确保XAMPP的Apache和MySQL服务已启动
2. 确认reportapp数据库和trials表已正确创建，字段类型匹配（如image字段设为VARCHAR类型，长度足够存储文件名）
3. 访问HTML页面，填写表单提交，即可看到明确的成功/失败提示，数据会正常存入数据库

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