2011-12-16 9 views
11

Ho qualche problema a rendere l'input del file come preferisco. L'elemento file esiste di 2 parti, il campo di testo e il pulsante Sfoglia. In altri browser rispetto a IE, facendo clic su uno di essi, viene visualizzata una finestra in cui è possibile selezionare i file. In IE tuttavia si apre solo quando faccio clic sul pulsante Sfoglia. Se faccio clic sul campo di testo accanto ad esso, devo fare doppio clic per aprire la finestra. C'è un modo per risolvere questo problema con javascript quindi un singolo clic sul campo di testo aprirà anche la finestra? Ho provato quanto segue, ma non ha funzionato. (Codice è molto semplificata dall'esempio reale)Apre la finestra di ricerca in IE con input con un singolo clic

Html: <input id="file" name="file" type="file"/>

JS/jQuery:

$("#file").click(function(){ 
    $(this).trigger("dblclick"); 
}); 

$("#file").dblclick(function(){ 
    alert("Double"); 
}); 

Ora il codice di cui sopra avvisa il "Double", ma non apre la finestra. C'è un modo per risolvere questo problema?

Grazie in anticipo.

risposta

9

Poiché l'intero controllo è nativo per il browser (e non viene mai esposto come casella di testo con il pulsante), semplicemente non si ha accesso a metodi/eventi che consentono di richiamare il pulsante di caricamento. Credo che questo sia principalmente per evitare che i siti inducano l'utente a caricare file non previsti.

Se è possibile impiegare un po 'di tempo per implementare una soluzione alternativa, this crea un componente di caricamento piuttosto piacevole che è più facile da gestire. Sono sicuro che un rapido google ti indicherà molti altri esempi su come modellare il componente di caricamento file.

+2

Ho avuto lo stesso problema, il mio input personalizzato sembrava soddisfacente, ma gli utenti di IE dovevano fare doppio clic. Per quelli troppo pigri per fare clic sul link: Rendi le dimensioni del font del tuo elemento input ENORME (l'articolo suggeriva 100px, avevo bisogno di 200px per il mio modulo, fa esplodere il pulsante in modo che la parte di input del testo diventi piccola. – chiliNUT

0

Ho appena testato il codice con JSFiddle su IE6 (http://jsfiddle.net/SUWRK/) e, da quanto ho capito, funziona come ci si aspetta ... L'avviso viene visualizzato in un singolo evento (si noti che è difficile prendere l'evento dblclick in IE < 9 - vedere https://gist.github.com/399624).

Sei sicuro che non ci sia qualcos'altro in corso con il set di codici più grande?

+0

Il risultato che voglio è che la finestra di esplorazione si apra, non per avvisare il "doppio". L'avviso era solo per mostrare che in realtà attiva il doppio clic (che è necessario per aprire la finestra di ricerca) ma non apre la finestra. – Ilians

+1

Sembra che abbia frainteso la tua domanda. Mi scuso per quello. In entrambi i casi, non è possibile controllare il componente di caricamento del file nella misura richiesta. Vedi la mia altra risposta (poiché la casella di commento è troppo corta per l'intera risposta). – lsoliveira

Problemi correlati