如何使用链接而不是浏览按钮来附加文件？

Question

我有如下表格：

<form id="submit_idea" name="submit_idea" method="post" action="">
  <a class="attach" title="Attach a file" onclick="clickAttachment()"
     href="javascript:void(0)">Attach File</a>
  <span id="id_filename"/>
  <input id="id_attachment" type="file" name="attachment"/>
  <input class="submit_btn" type="image" alt="Submit Idea" src="/static/img/submit_idea.png"/>
</form>

以及随之而来的相关 javascript。

function updateAttachment() {
    var val = $("#id_attachment").attr("value");
    if (val) {
        var name = val.split('\\');
        $("#id_filename").html(name[name.length - 1]);
    }
    else {
        setTimeout(updateAttachment, 500);
    }
}

function clickAttachment() {
    jQuery('#id_attachment').click();
    setTimeout(updateAttachment, 500);
}

这对 IE 很有效，但对 FireFox 3.5.1 根本不起作用。是否有另一种方法可以在 FF 3.5.1 或更高版本中仅使用 dhtml/javascript（无 Flash 等）获得相同的结果？

我们可以使用 CSS 来修饰“附加文件”链接，但我们不能更改 FireFox 为表单设置的浏览按钮的布局。 IE解决方案让我们通过代理点击按钮浏览文件，但在FireFox下不行。

提前致谢，-彼得

Answer 1

我相信这就是你要找的东西

Styling an input type="file"