这招对我很管用:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

工作方案

让我在这篇旧文章中补充一点，我曾经使用的一个有效的解决方案，在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示例

这招对我很管用:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

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

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)
}

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

如果你有JQuery:

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

如果不是:

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

谢谢。

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