Programaticamente disparar um evento onclick?

Question

Estou tentando simular um upload de arquivo assíncrona usando um iframe. Aqui é a minha marcação:

<form method="POST" enctype="multipart/form-data" name="change-avatar" action="/dyn/actions/upload?type=profile" target="target-upload">
<input type="file" name="change-avatar-input" style="position: absolute; z-index: 999; cursor: pointer; left: 10px; top: 57px; width: 147px; height: 23px; opacity: 0;"/>
<div style="position: absolute; z-index: 1000; cursor: pointer; left: 10px; top: 57px; width: 147px; height: 23px; opacity: 0;"/>
</form>
<button id="avatar-src" class="browse-button" type="button">Select File to Upload</button>

Tomei um botão regular e colocou um input type = arquivo em cima dela e defina a opacidade a 0. Esta entrada submete a uma iframe escondido. O problema é a entrada de arquivo produz um cursor inesperado (esperados se o ponteiro) e não pode ser denominado de forma confiável. Eu resolvi este problema, colocando uma outra div 0 opacidade sobre a entrada de arquivo 0 opacidade e estilo que, para produzir o cursor correta. Eu, então, definir um manipulador de eventos para detectar um clique no div 0 opacidade que por sua vez desencadeia programaticamente o evento onclick do arquivo de entrada usando click().

O problema é object.click() não parece ser suportado no Firefox (funciona como esperado no IE).

Answer 1

Confira o Valums Ajax Upload: http://valums.com/ajax-upload/

Esse componente tem feito o que parece que você está tentando fazer ... você deve ser capaz de obter algumas boas idéias lá para o seu código (ou apenas usar o componente em seu lugar).