引入Bulma CSS后图片上传表单提交触发PHP字段必填错误

问题描述 #

我开发了一个支持图片上传、命名后提交数据至PHP接口的网站，原本使用纯HTML+PHP实现正常。引入Bulma CSS库按要求用div重构表单后，点击提交按钮触发PHP错误提示："你需要填写所有字段"。

原正常HTML代码 #

<form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="emote" id="emote">
    <br>
    Emote name:
    <input type ="text" name="emotename" id="emotename">
    <br>
    <input type="submit" value="Upload Emote" name="submit">
</form>

重构后出错的表单代码 #

<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="field">
        <label class="label">Emote name</label>
        <div class="control">
            <input class="input" type="text" placeholder="Emote name..." id="emotename">
        </div>
    </div>
    <div class="file">
        <label class="file-label">
            <input class="file-input" type="file" name="resume" id="emote">
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fas fa-upload"></i>
                </span>
                <span class="file-label">
                    Choose a file...
                </span>
            </span>
        </label>
    </div>
    <div class="field is-grouped">
        <div class="control">
            <input class="button" type="submit" value="Submit">
        </div>
        <div class="control">
            <button class="button is-link is-light">Cancel</button>
        </div>
    </div>
</form>

错误原因分析 #

对比前后代码，两个核心问题导致后端判定字段为空：

• 表情名称输入框缺失name="emotename"属性：PHP依赖表单元素的name属性接收值，仅保留id无法让后端读取到该字段内容。
• 文件上传框的name属性被错误修改为"resume"：原代码中该字段name="emote"，后端是通过这个名称识别上传文件的，名称不匹配导致后端无法获取到上传文件。

修复后的表单代码 #

<form action="upload.php" method="post" enctype="multipart/form-data">
    <div class="field">
        <label class="label">Emote name</label>
        <div class="control">
            <!-- 补充name属性 -->
            <input class="input" type="text" placeholder="Emote name..." id="emotename" name="emotename">
        </div>
    </div>
    <div class="file">
        <label class="file-label">
            <!-- 修正name属性为emote -->
            <input class="file-input" type="file" name="emote" id="emote">
            <span class="file-cta">
                <span class="file-icon">
                    <i class="fas fa-upload"></i>
                </span>
                <span class="file-label">
                    Choose a file...
                </span>
            </span>
        </label>
    </div>
    <div class="field is-grouped">
        <div class="control">
            <input class="button" type="submit" value="Submit">
        </div>
        <div class="control">
            <button class="button is-link is-light">Cancel</button>
        </div>
    </div>
</form>

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