这并非不可能:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

但它只有在通过click-event调用的函数中才能工作。

所以你可能有以下设置:

html:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

我正在研究这个不久前，因为我想创建一个自定义按钮，将打开文件对话框，并立即开始上传。我刚刚注意到一些可能使这成为可能的事情- firefox似乎打开对话框，当你点击上传的任何地方。所以下面的方法可以做到:

创建一个文件上传和一个单独的元素，其中包含您想要用作按钮的图像 安排它们重叠，并使文件元素背景和边框透明，这样按钮是唯一可见的东西 添加javascript使IE在点击按钮/文件输入时打开对话框 当选择文件时，使用onchange事件提交表单

这只是理论上的，因为我已经用了另一种方法来解决这个问题，但它可能会起作用。

对于那些知道你必须在链接上覆盖一个看不见的表单，但懒得写的人，我为你写了它。对我来说是，但还是分享吧。欢迎提出意见。

HTML(某处):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML(你不关心的地方):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

只需使用标签标记，这样就可以隐藏输入，并使其通过相关标签工作 https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

试试这个解决方案:http://code.google.com/p/upload-at-click/

这将在Firefox 4中实现，但需要注意的是，它被视为一个弹出窗口，因此无论何时弹出窗口都将被阻止。