Come funziona l'input del file HTML?

Question

Non sto chiedendo come caricare un file.

Mi chiedo solo come, quando si fa clic su un elemento di file html, vengano visualizzate le cartelle di sistema locale .

Possiamo farlo con altri elementi html come pulsanti e input? In caso contrario, cosa c'è di così speciale nei file? Come mostra le directory di sistema?

Answer 1

L'unico elemento html che può dare accesso al filesystem è quello input (di tipo file), perché i browser gli permettono di mostrare una finestra di dialogo aperta, solo il browser può farlo, non c'è modo in nessuna API di script per accedere alle directory di sistema. Per motivi di sicurezza non esiste un altro modo corrente per accedere al filesystem in questo modo (attraverso una finestra di dialogo); salvare i dati localmente tramite HTML5, forzare una finestra di dialogo per il download, o una finestra di dialogo di stampa sono di nuovo, azioni controllate da browser, ma è possibile richiamarli da una pagina web.

Answer 2

AVVISO: non ho intenzione di descrivere esattamente come processo del browser con l'input di file, ma voglio elencare step-by-step quello che ho fatto e il suo risultato per comprendere meglio l'ingresso; Anche se potrebbe non essere d'aiuto usare per capire il suo meccanismo interno, ti aiuterà a non essere spaventato o confuso quando lavori con esso. Nei miei esperimenti userò HTML, Apache + PHP con CakePHP, Firefox e Chrome per confrontare il modo in cui è stato utilizzato nella programmazione in tempo reale. Iniziamo :)

1. L'input carica il file in memoria quando si seleziona il caricamento del file o no?
   • No, basta salvare il percorso del file. Uso il monitor di processo quindi seleziono il file quasi 200Mb, sia chrome che firefox non mangiano più memoria, né leggono il disco; Posso persino cancellare questo file prima di fare clic sul pulsante Invia.
2. Come il formato dell'effetto modulo sull'input?
   • application/x-www-form-urlencoded e text/plain sembrano ignorare file di input; solo multipart/form-data attivare il browser per leggere il file dal percorso del file e inviarlo. (per vedere più come lavoro enctype fare riferimento qui: What does enctype='multipart/form-data' mean?)
3. Che cosa fa lato server quando riceve i dati?
   • Come detto sopra, mi interessa solo PHP, PHP e che cosa ci dà è:

// Upload 1 file Array (
    [<input name in file input tag>] => Array 
     (
      [name] => <same as the name of selected to upload file> 
      [type] => <type> 
      [tmp_name] => <path of file in tmp folder will explain below> 
      [error] => <0: error, maybe because of file size too large, 1: success> 
      [size] => <size of file in bytes> 
     )  
) 
// Upload multiple files (input name must be <someName>[]) 
Array 
(
    [<input name in file input tag>] => Array 
     (
      [name] => [<array of name>] 
      [type] => [<array of type>] 
      [tmp_name] => [<array of tmp path>] 
      [error] => [<array of error>] 
      [size] => [<array of size>] 
     ) 

) 

Browser inviare richiesta (contiene file) ad Apache; Apache inoltra la richiesta a PHP; PHP estrae il file dalla richiesta e salva nel file nella cartella tmp che possiamo vedere in [nome_tmp]. Alla fine del file PHP, rimuove il temp, quindi dobbiamo usare move_uploaded_file prima che lo script termini se è necessario salvare il file.

4. Come fa CakePHP con il file caricato?
   • E 'uguale a quello che PHP non appena messo in $ this-> richiesta e dobbiamo fare in modo che i loro nomi devono essere dati [] o semplicemente usare $ this-> form-> forma ("")
5. Posso visualizzare l'anteprima dell'immagine o fare qualcosa con file selezionato prima di sottoporlo al server?
   • Sì. È possibile ascoltare l'evento onchange dell'input del file; Tramite il DOM, possiamo accedere a FileList quindi dal suo accesso a File; Con FileReader (supporto nei browser quasi correnti) possiamo leggere come URL dei dati ... (può vedere dettagli qui: how to preview a image before and after upload?)