jquery trigger: ¿cómo puedo activar el archivo de exploración en la entrada cuando hago clic en un enlace de texto?

Question

Siguiendo con este post, tengo otro emisor: ¿cómo puedo activar el archivo de exploración en la entrada cuando hago clic en un enlace de texto?

Básicamente quiero ocultar el formulario, pero se activará cuando haga clic en el enlace de carga de texto.

<a href="#" class="upload">upload</a> 
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm" style="display:none;"> 
    <input type="file" multiple="multiple" name="file[]" /> 
    <input type="submit" name="upload" value="Submit"/> 
</form> 
<div id="output"></div> 

Este es mi código Javascript de trabajo:

$(document).ready(function(){ 
    $('.upload').click(function(){ 
     $(this).trigger($('input[type=file]')); 
     return false; 
    }); 

    $('input[type=file]').change(function() { 
     $('#myForm').ajaxSubmit({ 
       target: '#output' 
     }); 
    }); 
}); 

Answer 1

No puede utilizar style="display:none;" uso style="visibility:hidden;"

y me cambió el gatillo para hacer clic:

$('.upload').click(function(){ 
    $('input[type=file]').click(); 
    return false; 
}); 

---

Reas oning:

Los campos de entrada no se enviarán al servidor con display:none, pero estarán con visibility:hidden.

Answer 2

El método de Joe es correcto. Sin embargo, esta solución solo funcionará en algunos navegadores. Funciona en Chrome y Firefox, pero no en Opera, Safari o el navegador incorporado de Android Galaxy S (probado en las versiones actuales al 23 de junio de 2012). Esos navegadores probablemente deshabiliten la activación del botón de carga a través de JS por razones de seguridad.

Voy a actualizar este post si encuentro una solución que funciona en todos los navegadores modernos

Answer 3

¿por qué no se utiliza una etiqueta en su lugar? entonces podrías usar el atributo for.

<style type="text/css"> 
    #file_upload { 
    visibility: hidden; 
    } 
</style> 
<a href="#" class="upload"> 
    <label for="file_upload">upload</label 
</a> 
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm"> 
    <input id="file_upload" type="file" multiple="multiple" name="file[]" /> 
    <input type="submit" name="upload" value="Submit"/> 
</form> 
<div id="output"></div>