如何通过JavaScript触发打开文件选择器？现有代码实现失败

你的代码问题在于点击文本框（input[type="text"]）时，没有触发隐藏的文件选择器（input[type="file"]）的点击事件。下面是可行的解决方案：

修改后的HTML代码 #

<table align="left" border="0" class="very compact table rounded">
    <tbody>
        <tr>
            <td>
                <div style="position:relative; height:28px;"> <!-- 固定高度确保元素对齐 -->
                    <!-- 文本框添加点击事件，触发文件选择器 -->
                    <input type="text" 
                           id="file_1053761667559715321" 
                           style="position:absolute; width:100%; height:100%; padding-right:80px; box-sizing:border-box;" 
                           placeholder="Clicca qui per selezionare un file" 
                           onclick="document.getElementById('file_input').click();">
                    <!-- 给文件输入框添加ID，调整样式确保覆盖范围 -->
                    <input type="file" 
                           id="file_input" 
                           name="documento" 
                           title="" 
                           style="opacity:0; z-index:2; width:100%; height:100%; position:absolute; cursor:pointer;" 
                           onchange="uploadFile(this)" 
                           class="ui primary button">       
                </div>
            </td>
            <td>              
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" 
                       value="Carica" 
                       style="background-color:#1678c2;height:20px;width:56px;padding:0px" 
                       onclick="inviaDocumentoAjax();" 
                       class="ui primary button">      
            </td>
        </tr>
    </tbody>
</table>

修改后的JavaScript代码 #

function inviaDocumentoAjax(formId) {
    inviaDocumentoAjaxByForm();
    // 清空文本框和文件输入，避免重复选同文件不触发onchange
    const textInput = document.getElementById("file_1053761667559715321");
    const fileInput = document.getElementById("file_input");
    textInput.value = "";
    fileInput.value = "";
}

function uploadFile(target){
    // 检查是否选中了文件
    if(target.files && target.files.length > 0){
        document.getElementById("file_1053761667559715321").value = target.files[0].name;
    }
}

关键调整说明 #

• 触发文件选择器：给文本框添加onclick事件，主动调用文件输入框的click()方法，这样点击文本框时会直接弹出文件选择窗口。
• 样式优化：调整文件输入框的宽高为100%并设置绝对定位，确保它完全覆盖文本区域，同时设置cursor:pointer让鼠标悬停时显示点击指针，提升交互体验。
• 鲁棒性提升：在uploadFile里增加文件存在判断，避免用户取消选择时报错；上传完成后清空文件输入框的值，否则重复选择同一文件时不会触发onchange事件。

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