trigger jQuery: come posso attivare il file di ricerca nell'input quando faccio clic su un link di testo?

Question

Seguito su questo post, ho un altro emittente: come posso attivare il file di ricerca nell'input quando faccio clic su un link di testo?

In pratica, voglio nascondere il modulo ma verrà attivato quando si fa clic sul collegamento del testo di caricamento.

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

Questo è il mio codice Javascript di lavoro:

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

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

Answer 1

Non è possibile utilizzare style="display:none;" uso style="visibility:hidden;"

e ho cambiato grilletto per fare clic:

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

---

Reas in corso:

I campi di input non verranno inviati al server con display:none, ma saranno con visibility:hidden.

Answer 2

Il metodo di Joe è corretto. Tuttavia, questa soluzione funzionerà solo su alcuni browser. Funziona su Chrome e Firefox ma non su Opera, Safari o sul browser integrato Android Galaxy S (testato sulle versioni correnti a partire dal 23 giugno 2012). È probabile che tali browser disabilitino l'attivazione del pulsante di caricamento tramite JS per motivi di sicurezza.

aggiornerò questo post se trovo una soluzione che funziona in tutti i browser moderni

Answer 3

perché non si utilizza un'etichetta invece? allora potresti usare l'attributo 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>