时间戳

首页 > 解决方案 > 在 HTML 中具有自定义按钮样式的输入文件

javascript - 在 HTML 中具有自定义按钮样式的输入文件

问题描述

我想用我的自定义按钮样式创建输入文件，问题是浏览按钮不起作用，即它没有打开文件对话框：

<input type="text" placeholder="No file selected" id="txtPath"  />
<input type="button" value="Browse..." id="btnBrowse"  />
<input type="file" style="display:none;" id="file" name="file" />

标签： javascripthtmlcss

解决方案

按钮不做任何事情。如果您希望该按钮用于上传某些内容，请使用 Javascript 来“单击”不可见的文件输入。将 OnClick 添加到您的按钮：

<input type="button" value="Browse..." id="btnBrowse" onClick="browse()" />

并将其添加到 Javascript：

function browse() {
    console.log("hi")
    document.getElementById('file').click();
}

推荐阅读