HTML 5: przesyłanie wielu plików jednocześnie

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.

Advertisements

MDN

Better JavaScript docs for a better Web on MDN

Archiwum