¿Cómo uso un enlace en lugar del botón Examinar para adjuntar un archivo?

Question

Tengo un formulario como el siguiente:

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

Y el javascript asociado que lo acompaña.

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

Esto funciona muy bien para IE, pero no funciona para FireFox 3.5.1. ¿Hay otra forma de obtener el mismo resultado en FF 3.5.1 o posterior con solo usar dhtml / javascript (sin Flash, etc.)?

Podemos usar CSS para vestir el " Adjuntar archivo " enlace, pero no podemos cambiar el diseño del botón de exploración que FireFox presenta para el formulario. La solución IE nos permite a través de un proxy hacer clic en el botón para buscar un archivo, pero eso no funciona con FireFox.

Gracias de antemano, -peter

Answer 1

Esto es lo que estás buscando, creo

Diseño de un tipo de entrada = " archivo "