jQuery: la simulazione di un clic su un <input type = "file" /> non funziona in Firefox?

Eventuali duplicati:
In JavaScript can I make a “click” event fire programmatically for a file input element?jQuery: la simulazione di un clic su un <input type = "file" /> non funziona in Firefox?

Ho una pagina web che assomiglia a questo

<html> 
    <head> 
     <title>File Upload Click Test</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    </head> 
    <body> 
     <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div> 
     <input type="file"></input> 
    </body> 
</html>

Il mio obiettivo è di avere il div sollevare un click evento sul file input, e questo sembra funzionare esattamente come l'ex pect in IE e Chrome, ma non funziona in Firefox (nessun file browser viene aperto quando si fa clic sul div).

C'è un modo per farlo funzionare in FF?

fonte

2009-12-01 kristian

è venuta in FF4: https://developer.mozilla.org/en/using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method –

Vedere questa risposta http://stackoverflow.com/questions/210643/in -javascript-can-i-make-a-click-evento-fuoco-programmaticamente-per-un-file-input-e/3030174 # 3030174 funziona anche in FF – TheVillageIdiot

Questa mattina ho testato lo script ed è funzionante bene in firefox 4. Firefox 4 consente l'evento click sull'input del file. – kriom

C'è un modo per farlo funzionare in FF?

No, e non funziona anche nelle versioni più comuni di IE. IE aprirà la finestra di dialogo, ma una volta selezionato un file, il modulo non verrà inviato.

Abbandona la speranza. L'unico modo per simulare una casella di caricamento file è l'utilizzo della tecnica di trasparenza, che in realtà non è consigliabile in quanto i browser possono disporre le caselle di caricamento dei file in modo diverso internamente (o anche fornire un controllo di caricamento dei file che non include un dialogo Sfoglia), è altamente probabile che finirai con una forma inutilizzabile.

Imparare ad amare il campo di caricamento file grigio o utilizzare il miglioramento progressivo per sostituirlo con Flash, laddove disponibile.

fonte

2009-12-02 00:01:40 bobince

+42

Abbandona la speranza. Dai un'occhiata. – kristian

Funziona ora in Firefox 4. –

Bene, grazie per non avermi sprecato altro tempo ..già trascorso un paio di giorni su questo con la speranza in mano. –

Ecco la soluzione alternativa (FF). Il bit HTML:

<label>Upload Business Logo</label> 
<input type="file" name="logo" id="logo" class="file-upload" /> 
<input type="text" id="text-logo" class="text-upload" readonly/> 
<input type="button" id="btn-logo" class="btn-upload" alt="" />

CSS per il tipo di file di input:

.file-upload { display:none; }

Il bit jQuery:

//bind click 
$('#btn-logo').click(function(event) { 
    $('#logo').click(); 
}); 

//capture selected filename 
$('#logo').change(function(click) { 
    $('#text-logo').val(this.value); 
});

Al modulo di invio, il file di input nascosto caricherà il file. Spero che questo aiuti :)

fonte

2012-02-20 01:15:34

Hai provato il codice? Se fosse così facile, perché il richiedente sarebbe qui? Perché dovrei essere qui? Ultimo ho controllato, non è possibile impostare il valore di un file di input. E a quanto pare non è possibile attivare eventi su di loro. Probabilmente ragioni di sicurezza – Stoutie

Lo riprendo, sembra che sia così semplice. Ma non funziona quando lo si prova nella console. Quando inserisco il codice nel mio documento, sembra funzionare bene. Derp. – Stoutie

+1 funziona perfettamente, non solo nella console! Strano, suppongo che sia per motivi di sicurezza. – ksloan

jQuery: la simulazione di un clic su un <input type = "file" /> non funziona in Firefox?

risposta

Problemi correlati