Dotychczas, chcąc umożliwić użytkownikowi przesłanie wielu plików przy pomocy formularza HTML, webmasterzy musieli posiłkować się albo apletami Flasha (takimi jak SWFUpload czy Uploadify), albo wstawić wiele elementów input. To drugie rozwiązanie było niewygodne dla użytkownika, ponieważ musiał on każdy plik wybrać w osobnym oknie wyboru pliku. Tak robiło się to do tej pory w HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload plików - pojedynczy</title>
<form method="post" enctype="multipart/form-data" action="upload.php">
<fieldset>
<legend>Prześlij pliki</legend>
<label>Dodaj plik 1:
<input type="file" name="files[]">
</label><br>
<label>Dodaj plik 2:
<input type="file" name="files[]">
</label><br>
<label>Dodaj plik 3:
<input type="file" name="files[]">
</label><br>
<label>Dodaj plik 4:
<input type="file" name="files[]">
</label><br>
<!-- itd... -->
<input type="submit">
</fieldset>
</form>
Niezbyt to wygodne, jeśli chcemy załadować np. kilka zdjęć z naszej ostatniej wycieczki w góry…
Gecko 1.9.2 (dostępne m. in. w nadchodzącym Firefoksie 3.6) oraz nowsze wersje przeglądarek opartych na silniku WebKit obsługują atrybut multiple elementu <input> z atrybutem type="file". Atrybut ten pozwala do jednego inputa wstawić wiele plików. Powyższy kod upraszcza się więc w HTML 5 do takiej postaci:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Upload wielu plików</title>
<form method="post" enctype="multipart/form-data" action="upload.php">
<fieldset>
<legend>Prześlij pliki</legend>
<label>Dodaj pliki:
<input type="file" multiple name="files[]">
</label><br>
<input type="submit">
</fieldset>
</form>
Po kliknięciu “Przeglądaj” użytkownikowi wyświetli się systemowa wybieraczka plików, pozwalająca zaznaczyć wiele plików (z wciśniętym klawiszem Ctrl, Shift, lub poprzez odpowiednie zaznaczenie myszą). Po stronie serwera nic się nie zmienia, przesłane pliki traktowane są tak samo, jakby były przesłane z kilku osobnych, a nie jednego wspólnego inputa.
Tak więc np. kod w PHP operujący na tablicy $_FILES w ogóle nie musi być modyfikowany po przejściu na input z atrybutem multiple (jeśli korzystaliśmy do tej pory z wielu inputów o tej samej “tablicowej” nazwie).
HTML 5 po raz kolejny rozwiązuje problem, który irytował webmasterów od niepamiętnych czasów. Teraz czekamy już tylko na Operę i Microsoft… :)
PS. Na razie aplety w rodzaju SWFUpload pozostają niezastąpione, jeśli chcemy użytkownikowi np. pokazywać pasek postępu podczas przesyłania plików. Wkrótce jednak flashowe protezy zupełnie stracą rację bytu – W3C pracuje nad specyfikacją FileUpload, która umożliwi przesyłanie plików poprzez XMLHttpRequest.
marcoos.techblog 
@1 akapit – na wielu stronach mozna od lat bez problemu uploadowac wiele plikow za pomoca 1 inputa http://www.uploadify.com/demo/
Nie można – nie za pomocą inputa.
SWFUpload, Uploadify, i YUIUploader to wszystko aplety Flash _zastępujące_ inputa htmlowego. Tutaj mówimy o prawdziwym inpucie HTML-owym, nie o flashowej prowizorce. (Uch, cookies w windowsowym Flashu – masakra…) :)
Dopisałem “i Uploadify” do “(takimi jak SWFUpload)”.
Kiedy będzie można pobrać kilka plików na raz. Załóżmy mam listę plików na stronie i checkboxa przy każdym z nich, zaznaczam sobie kilka plików i przyciskam na “Pobierz”, wybieram katalog i lądują tam wszystkie zaznaczone pliki. IMHO przydatne. Teraz można podobnie np. w google-docs ale ich serwer pakuje pliki w zipa tak by można było ściągnąć kilka dokumentów na raz.. Albo np. żeby można było pobrać cały, niespakowany katalog, tak jak to jest z torrentem.. Takie rekursywne pobieranie z zachowaniem struktury katalogów. Z pewnością byłoby to duże ułatwienie. Pozdrawiam.
Szkoda, że to jest tak mało popularne. Praktycznie wszędzie trzeba się męczyć z flashowymi uploaderami (Dropbox, Vimeo itd.) lub pojedynczym dodawaniem załączników (większość, jeśli nie wszystkie fora, Gmail i inne webmaile).
GMail używa flashowego uploadera (przynajmniej w moich Google Appsach), a z innych webmaili – poczta Interii używa SWFUploadu, opisanego tu inputa multiple, zwykłych inputów (w tej kolejności).
Trudno żeby było popularne coś, co w Firefoksie pojawiło się 3 dni temu. Ale nie mam wątpliwości, że popularne będzie. :)
Marcoos, w HTML 4.01 od zawsze była możliwość wysyłania kilku plików jednocześnie. Właściwie to nawet nie chodzi to u HTML4 czy HTML5, to po prostu wynika z protokołu HTTP, gdzie taka możliwość jest przewidziana. Inna sprawa, że żadna przeglądarka tego nie obsługiwała. Zgodnie z HTTP, tam gdzie jest input file powinna być możliwość wskazania kilku plików (np za pomocą Ctrl) – tak też działa wymieniony przez Ciebie SWFUpload. Trochę mnie to dziwi, że to co od parunastu lat jest wiadome, teraz o tym się mówi o tym w kontekście HTML5 jakby to była nowość. Zupełnie jak w przypadku dynamicznego typowania w C# co jest mega-nowością (mimo, że od parudziesięciu lat inne języki to mają).
1. W HTML 4.01 traktowanym jako abstrakcyjny byt – tak. W HTML 4.01 jako tym, co można było używać – nie. :)
Wyobrażasz sobie sytuację taką, w której robisz klientowi stronę, on chce uploadować wiele plików jednocześnie, a ty mu mówisz:
– można, z tym że przeglądarka musi to obsługiwać…
– jaka przeg. to obsługuje?
– żadna!
2. SWFUpload wcale tak nie działa (wysyła każdy plik w osobnym requeście).
3. Atrybut “multiple” jest nowością w HTML 5 (osobiście wolałem poprzednią wersję z atrybutami min i max, ale…).
I to, że ten atrybut _działa_ w najnowszych WebKitach i Gecko – to też nowość. Dlatego jest sens o tym mówić.
Gadanie czysto akademickie o czymś, co było sobie w specyfikacji przez x lat, ale nie istniało poza teorią, nie ma sensu. Równie dobrze można by podyskutować o tym, czego to XHTML 2 nie “umożliwiał”. Teoretycznie. :)
ad 1 OK, tylko nie wiem dlaczego uważasz coś co nie zostało zaimplementowane za coś co jest niemożliwe do zaimplementowania. Abstrakcyjny bo nikomu się nie chciało tego zaprogramować mimo, że dało by się to zrobić bardzo łatwo. To tak jak z text-shadow – wypadł z CSS2.0 bo jest “abstrakcyjny” i “niemożliwy” do zaimplementowania. Nagle okazało się, że ludzie od webkita zaimplementowali i po czym nagle to czego w gecko się nie dało zaimplementować i w ciągu miesiąca się jednak dało.
A to, że przeglądarki tego nie obsługują… jasne, że nie ale to nie znaczy automatycznie, że standard (standardy) są złe tylko, że programiści są leniwi.
2. “Działa” w sensie, że wyświetla jedno pole do pliku a po wybraniu pojawia się systemowe okienko (identyczne jak w input file) z tą różnicą, że jak trzymasz Ctrl to możesz zaznaczyć więcej niż jeden plik a w input file (z niewytłumaczalnych przyczyn, bo jak już ustaliliśmy standard to przewiduje) nie. W HTTP faktycznie idą jak odrębne pliki, bez uwzględnienia możliwości jakie daje MIME w tym względzie.
3. Nigdzie nie napisałem, że “multiple” już wcześniej istniało. Osobiście mi się to rozwiązanie nie podoba, jeszcze bardziej nie podoba mi się Twoje :) . Chodzi tylko o to, że wysyłanie wielu plików z jednego inputa nie jest nowością w sensie standardów.
No jasne, że praktyka często nie idzie z teoria. Tylko ja stanowczo protestuje przeciwko PR-owi HTML5 lub/i Mozilli, jakoby coś nigdy nie istniało a teraz nagle Mozilla i grupa robocza HTML nas zbawi i od tej pory dzięki niezmierzonemu dobru programistów Mozilli (i Safari) oraz geniuszowi twórców HTML5 świat zostanie uratowany :) . I żeby była jasność sam byłem za “sklonowaniem” multiple z selecta do inputa (po tym, jak inny propozycje upadły) ale jakoś nie czuje się geniuszem ani nie mam poczucia, że przyczyniłem się do powstania czegoś nowego.
Na Operze to już działa, Microsoft naraz potrafi dodać tylko jeden plik