Pulsante per mostrare selezionare una finestra di dialogo per caricare il file

Question

Invece di utilizzare un tag html input type="file", è possibile visualizzare una finestra di dialogo choose a file to upload facendo clic su input type="button"? Quindi, quando viene selezionato un file dalla finestra di dialogo choose a file to upload, il percorso del file viene inserito in un normale tag html input type="text"?

Sembra che Gmail faccia qualcosa di simile ma non con pulsanti e input di testo, hanno semplicemente un collegamento add file o qualcosa del genere. Quando viene fatto clic su quel collegamento, viene visualizzata la finestra di dialogo select file(s) to upload by mail.google.com. Quando si fa clic su un file, il nome del file viene visualizzato sullo schermo.

Come stanno facendo?

Answer 1

Penso che la maggior parte dei browser abbia questo blocco per motivi di sicurezza. Pulsanti e caselle di testo possono essere manipolati tramite JavaScript. Le caselle di input dei file non possono, e per una buona ragione; immagina se un javascript potrebbe aprire una finestra di dialogo, impostare il percorso di un file sensibile sul tuo sistema, quindi simulare il clic del pulsante per scaricare il file!

---

A proposito, se siete alla ricerca per lo stile, forse questo dovrebbe funzionare: http://www.quirksmode.org/dom/inputfile.html

Answer 2

Non è possibile alterare un input[type=file] come ti piace, è un elemento di forma puramente nativo.

Inoltre, non sarà possibile ottenere il percorso del file per motivi di sicurezza. Le versioni precedenti di IE mostrano il percorso ma non è più il caso con le versioni più recenti e non sarà comunque possibile fare nulla con il percorso sul lato server.

Ci sono però alcuni metodi per lo stile:

• Styling File Upload/Select Input Control
• Styling an input type="file"
• Styling file inputs with CSS and the DOM

Answer 3

dare un'occhiata a plupload, ho usato molte volte per gestire il caricamento del file .

Answer 4

Scegli questa violino: http://jsfiddle.net/A4BS7/1/

NOTA:

a) Questo potrebbe non funzionare correttamente su browser più vecchi (principalmente IE) che non sparano l'evento di modifica del file di input.

b) Perché il caricamento funzioni come previsto, è necessario includere l'elemento <input type="file"> nel modulo. L'elemento di testo può essere utilizzato per visualizzare al meglio il file selezionato.

Answer 5

<input type="file" style="display:none;" id="inputfile"/> 
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a> 

Prova questo. Penso che sia utile .. :)