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

标签 javascript html css

<分区>

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

<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" />

最佳答案

该按钮不执行任何操作。如果您希望该按钮用于上传内容,请使用 Javascript 来“单击”de 不可见文件输入。将 OnClick 添加到您的按钮:

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

并将其添加到 Javascript 中:

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

关于javascript - 在 HTML 中具有自定义按钮样式的输入文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58626335/

上一篇:javascript - 在表单上可见隐藏/显示后向表单添加必需属性

下一篇:javascript - 元素切换类但不获取新类的样式

相关文章:

javascript - Openlayers 3 - 如何垃圾收集 Canvas ReplayGroup 对象?

html - 单击提交按钮时,输入文本框图标正在扩展,如何使用 CSS 修复它?

css - 使样式保持不变

css - SASS 字体混合问题?

javascript - 避免在直流图表中隐藏/切割气泡

javascript - 获取渲染元素的组件

javascript - 无效的 JSON 语法和 $.getJSON

html - 设置固定的 div 宽度以继承父级的流体宽度

javascript - HTML5 Canvas 工具提示

javascript - d3.js - 图表的位置