我有一个<input type="button">标签隐藏在视图中。我所做的是将“onClick”事件附加到任何类型的可见组件(如标签)。这是使用谷歌Chrome的开发工具或Mozilla Firefox的Firebug使用右键单击“编辑HTML”命令完成的。在这种情况下，指定以下脚本或类似的东西:

如果你有JQuery:

$('#id_of_component').click();

如果不是:

document.getElementById('id_of_component').click();

谢谢。

工作方案

让我在这篇旧文章中补充一点，我曾经使用的一个有效的解决方案，在80%或以上的新老浏览器中都有效。

解决方案复杂而简单。第一步是使用CSS和伪装输入文件类型的“下元素”，显示通过，因为它的不透明度为0。下一步是根据需要使用JavaScript更新其标签。

如果你想要一个快速访问特定元素的方法，ID只是简单地插入，然而，类是必须的，因为它们与设置整个过程的CSS有关

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

请记住，颜色和字体样式等完全是你的偏好，如果你使用这个基本的CSS，你可以随时使用后端标记到你喜欢的样式，这在jsFiddle最后列出。

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript的纯粹和真实，然而，一些旧的(退休的)浏览器可能仍然有问题(像netscrap2 !)

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

工作jsFiddle示例

我知道这很老了，所有这些解决方案都是针对浏览器安全预防措施的黑客，具有真正的价值。

也就是说，到今天为止，fileInput.click()可以在当前的Chrome (36.0.1985.125 m)和当前的Firefox ESR(24.7.0)中工作，但不能在当前的IE(11.0.9600.17207)中工作。在一个按钮的顶部覆盖一个不透明度为0的文件字段是可行的，但是我想要一个链接元素作为可见的触发器，并且悬停下划线在任何浏览器中都不太适用。它闪烁着然后消失了，可能是浏览器在考虑是否实际应用悬浮样式。

但我确实找到了一个在所有这些浏览器中都能工作的解决方案。我不会说我测试过所有浏览器的每个版本，也不会说我知道它会一直工作下去，但它现在似乎满足了我的需求。

这很简单:将文件输入字段定位到屏幕外(Position: absolute;顶部:-5000px)，在它周围放一个标签元素，并触发标签上的点击，而不是文件字段本身。

请注意，链接需要编写脚本来调用标签的click方法，它不会自动完成，就像单击标签元素中的文本一样。显然，link元素捕获了点击，而没有传递到标签。

还要注意，这并没有提供显示当前所选文件的方法，因为该字段是屏幕外的。我想在文件被选中时立即提交，所以这对我来说不是问题，但如果您的情况不同，您将需要某种不同的方法。

我发现如果输入(文件)是外部形式，那么触发单击事件调用文件对话框。

这是可能的: 在FF4+、Opera ?、Chrome下: 但是:

inputElement.click()应该从用户操作上下文中调用!(不是脚本执行上下文) <input type="file" />应该是可见的。Display !== 'none')(你可以用可见性或其他东西隐藏它，但不能用" Display "属性)

要做到这一点，你可以点击文件输入上的一个不可见的传递元素:

function simulateFileClick() {
  const div = document.createElement("div")
  div.style.visibility = "hidden"
  div.style.position = "absolute"
  div.style.width = "100%"
  div.style.height = "100%"
  div.style.pointerEvents = "none"
  const fileInput = document.getElementById("fileInput") // or whatever selector you like
  fileInput.style.position = "relative"
  fileInput.appendChild(div)
  const mouseEvent = new MouseEvent("click")
  div.dispatchEvent(mouseEvent)
}