Como uso um link em vez do botão de navegação para anexar um arquivo?

Question

Eu tenho um formulário como o seguinte:

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

E o JavaScript associado que acompanha ele.

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

Isso funciona muito bem para o IE, mas não funciona para o Firefox 3.5.1. Existe outra maneira de obter o mesmo resultado no FF 3.5.1 ou posterior apenas usando apenas o dhtml/javascript (sem flash, etc.)?

Podemos usar o CSS para vestir o link "Anexar arquivo", mas não podemos alterar o layout do botão de navegação que o Firefox coloca para o formulário. A solução do IE permite -nos por meio de um proxy clicar no botão para navegar para obter um arquivo, mas isso não funciona no Firefox.

Obrigado antecipadamente, -Peter

Answer 1

Aqui está o que você está procurando, eu acredito

Modelando um tipo de entrada = "arquivo"