Jak działa wejście pliku HTML?

Question

Nie pytam, jak przesłać plik.

Zastanawiam się, jak po kliknięciu elementu pliku html pokazuje on lokalne foldery systemowe.

Czy możemy to zrobić z innymi elementami html, takimi jak przyciski i wejścia? Jeśli nie, co jest takiego specjalnego w plikach? Jak pokazuje katalogi systemowe?

Answer 1

Jedynym elementem HTML, który może dać ci dostęp do systemu plików, jest input (z pliku typu), ponieważ przeglądarki pozwalają na wyświetlanie otwartego okna dialogowego, tylko przeglądarka może to zrobić, nie ma możliwości w żadnym skryptowym interfejsie API aby uzyskać dostęp do katalogów systemowych. Ze względów bezpieczeństwa nie ma innego sposobu dostępu do systemu plików w ten sposób (poprzez okno dialogowe); zapisywanie danych lokalnie za pomocą HTML5, zmuszanie do zapisania okna dialogowego zapisywania lub ponowne drukowanie, to działania kontrolowane przez przeglądarkę, ale możesz wywoływać je ze strony internetowej.

Answer 2

UWAGA: Nie będę opisywać dokładnie jak z wejściem proces przeglądarki plików, ale będę lista krok po kroku, co zrobiłem, a jego wynik do lepszego zrozumienia wkładu; Chociaż może to nie pomóc w zrozumieniu jego wewnętrznego mechanizmu, pomoże ci się nie bać ani nie mylić podczas pracy z nim. W moich eksperymentach użyję HTML, Apache + PHP z CakePHP, Firefox i Chrome, by porównać to, w jaki sposób było używane w programowaniu w świecie rzeczywistym. Zacznijmy :)

1. Plik ładowania wejścia do pamięci po wybraniu przesłania pliku, czy nie?
   • Nie wystarczy zapisać ścieżkę pliku. Używam monitora procesu, a następnie wybieram plik prawie 200Mb, zarówno chrome, jak i firefox nie jedzą więcej pamięci lub czytają dysk; Mogę nawet usunąć ten plik przed kliknięciem przycisku przesyłania.
2. Jak typie efektu formularza do wejścia?
   • application/x-www-form-urlencoded i text/plain wydaje się IGNOROWAĆ wprowadzenie danych do pliku; tylko multipart/form-data uruchamia przeglądarkę, aby odczytać plik ze ścieżki pliku i wysłać go. (Aby dowiedzieć się więcej na temat pracy z typami enkawymi, zobacz: What does enctype='multipart/form-data' mean?)
3. Co robi strona serwera po otrzymaniu danych?
   • Jak wspomniano powyżej, tylko dbać o PHP, PHP i co daje nam to:

// 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>] 
     ) 

) 

Przeglądarka wysłać żądanie (zawierają pliku) do Apache; Apache przekazuje żądanie do PHP; PHP wyodrębnia plik z żądania i zapisuje do pliku w folderze tmp, który możemy zobaczyć w [nazwa_tmp]. Na końcu pliku PHP usuwa on tymczasowo, więc musimy użyć move_uploaded_file przed zakończeniem skryptu, jeśli chcemy zapisać plik.

4. Jak działa CakePHP z przesłanym plikiem?
   • To samo, co PHP nie wystarczy umieścić go w $ this-> wniosek i musimy zapewnić, że ich nazwy muszą być dane [] lub po prostu użyć $ this-> form-> formularz („”)
5. Czy mogę wyświetlić podgląd obrazu lub zrobić coś z wybranym plikiem przed przesłaniem go na serwer?
   • Tak. Możesz wysłuchać zdarzenia onchange wejścia pliku; Poprzez to DOM możemy uzyskać dostęp do FileList, a następnie możemy uzyskać do niego dostęp w File; Z FileReader (wsparcie w prawie aktualnych przeglądarek) możemy odczytać jako url danych ... (Może zobaczyć szczegółowo: how to preview a image before and after upload?)