你不能在所有浏览器中都这么做，IE应该允许，但Mozilla和Opera不允许。

当您在GMail中撰写消息时，“附加文件”功能以一种方式为IE和任何支持此功能的浏览器实现，然后以另一种方式为Firefox和那些不支持此功能的浏览器实现。

我不知道为什么你不能这样做，但有一件事是有安全风险的，而且你不允许在任何浏览器中这样做，那就是在HTML file元素上以编程方式设置文件名。

工作方案

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

你可以使用

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>

如果你想让click方法在Chrome、Firefox等浏览器上也能工作，请将下面的样式应用到输入文件中。它会被完全隐藏起来，就像你在做一个显示一样:没有;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

就是这么简单，我测试过了!

它是有效的:

出于安全原因，在Firefox和Opera上，你不能触发点击文件输入，但你可以用MouseEvents模拟:

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

我一整天都在寻找解决办法。以下是我得出的结论:

出于安全原因，Opera和Firefox不允许触发文件输入。 唯一方便的选择是创建一个“隐藏”文件输入(使用不透明，而不是“隐藏”或“显示:none”!)，然后在它下面创建按钮。通过这种方式，按钮是可见的，但用户单击它实际上激活了文件输入。 上传文件