Upload plików w JavaScript

javascript-html5-tutorial.pl

Luty 10th, 2014

Dominik-W

Dziś rzecz o tym, jak wykonać upload plików w JavaScript. OK, z małą pomocą innych technologii. Chodzi jednak o jedną, spójną, efektowną i działającą całość.

Upload plików w JavaScript

Podstawowy upload plików można wykonać w prosty sposób, wystarczy element HTML (input) typu field w formularzu oraz kilka linijek kodu PHP do obsługi.

Użycie JavaScript po prostu otwiera więcej możliwości, szczególnie jeśli chodzi o efekty w UI, informowanie użytkownika o postępie lub błędach.

I na tym skupia się ten mały tutorial. Dziś opiszę upload plików w JavaScript w oparciu o sprawdzone rozwiązanie, jakim jest Uploadify. Na koniec rozważymy kilka alternatywnych rozwiązań do realizacji uploadu.

Ograniczymy się do podstawowej wersji Uploadify, opartej o jQuery oraz obiekt Flash (SWF). Dostępna jest także wersja rozwiązania oparta o możliwości HTML5 (nazywana Uploadfive), jednak w tym wypadku trzeba będzie liczyć się z opłatą.

Uploadify

Na rozwiązaniu tym operujemy z poziomu JavaScript. Właściwie każdy element jest konfigurowalny, dzięki czemu możemy w pełni dostosować wtyczkę do wyglądu strony / aplikacji WWW.

Samej wtyczki używa się bardzo prosto, na przykład:

$(function() {
    $("#file_upload_1").uploadify({
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 180,
        height        : 32
    });
});

Przeanalizujmy jednak wszystkie elementy rozwiązania.

Użycie uploadify

Wymagania:

– PHP lub inna technologia server-side, w celu implementacji odbierania i zapisywania plików na serwerze,

– Flash Player i jQuery po stronie klienta.

I przystępujemy do dzieła.

1. Pobieramy rozszerzenie Uploadify i rozpakowujemy.

Plugin dostarczany jest z gotowymi plikami JavaScript, PHP i CSS, na których możemy bazować. Rozwiązanie końcowe możemy uzyskać bardzo szybko.

2. Tworzymy nowy plik główny, najlepiej index.php i dołączamy w nim potrzebne skrypty .js:


<script type="text/javascript" 
  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript" 
  src="/jquery.uploadify-3.1.min.js"></script>

Jeżeli nie mamy przygotowanych stylów CSS, możemy użyć tych dostarczonych z pluginem:

3. Dodajemy element input typu file

<input type="file" name="file_upload" id="file_upload" />

4. Inicjujemy Uploadify na dodanym polu input:

	
$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : 'uploadify.php'
        // ... inne opcje, jeśli trzeba
    });
});

5. Tworzymy na serwerze folder (np. uploads), w którym będą zapisywane pliki i nadajemy mu odpowiednie prawa zapisu (np. 0755). Potrzebujemy także skryptu PHP, który umieści wysyłane pliki w odpowiednim miejscu.

Dodatkowe dane możemy przesyłać w polu formData, na przykład:

$('#file_upload').uploadify({
  // ...
  'method'   : 'post',
  'formData' : { 'foo' : 'bar' }
  // ...
});

W ten sposób określiliśmy parametr foo, a także wysyłanie danych metodą POST. W skrypcie PHP dane te będą dostępne w następujący sposób:

$someVar = $_POST['foo']; // bar

6. Składamy wszystko w całość

Możemy posłużyć się skryptem uploadify.php, który jest dostarczany razem z pluginem. Wystarczy dostosować go do swoich potrzeb.

Przykładowy skrypt uploadify.php

$targetFolder = 'uploads'; // relative to the root

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
    
    // validate the file type
    $fileTypes = array('jpg','jpeg','gif','png'); // allowed file extensions
    $fileParts = pathinfo($_FILES['Filedata']['name']);
    
    if (in_array($fileParts['extension'], $fileTypes)) {
        move_uploaded_file($tempFile, $targetFile);
        echo $targetFolder . '/' . $_FILES['Filedata']['name'];
    } else {
        echo 'Invalid file type.';
    }
}

Natomiast kod po stronie użytkownika może wyglądać jak w poniższym przykładzie:

<!DOCTYPE html>
<html>
<head>
  <title>My Uploader</title>
  <link rel="stylesheet" type="text/css" href="uploadify.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="jquery.uploadify.min.js"></script>
</head>
<body>
  <h1>Uploadify Test</h1>
  <form>
    <div id="queue"></div>
    <input id="file_upload" name="file_upload" type="file" multiple="true">
  </form>
  
  <script type="text/javascript">
  <?php $timestamp = time(); ?>
  
  $(function() {
    $('#file_upload').uploadify({
      'formData' : {
        'timestamp' : '<?php echo $timestamp; ?>',
        'token'     : '<?php echo md5('unique_salt' . $timestamp); ?>'
      },
      'swf'      : 'uploadify.swf',
      'uploader' : 'uploadify.php',

      'onUploadSuccess' : function(file, data, response) {
        alert('The file was saved to: ' + data);
      }

    });
  });
  </script>
  
</body>
</html>

Zdefiniowaliśmy także funkcję callback, która poinformuje użytkownika o zakończonym zapisywaniu danych na serwerze.

I to wszystko. W tej chwili nasz upload plików w JavaScript powinien być gotowy:

Warto na koniec zwrócić uwagę na dodatkowe kwestie bezpieczeństwa.

Źródła przykładu do pobrania: tutaj.

Skrypty są gotowe do użycia, należy jedynie skonfigurować ścieżki odpowiednio dla swojego serwera, oraz walidację typu pliku, jeśli jej potrzebujemy.

W razie problemów dostępne jest pomocne forum:

http://www.uploadify.com/forum/

Więcej sposobów na upload plików w JavaScript

Na zakończenie przedstawiam inne gotowe sposoby:

– jQuery file upload:

http://blueimp.github.io/jQuery-File-Upload/

– ciekawe rozwiązanie oferowane przez Dojo Toolkit:

http://dojotoolkit.org/documentation/tutorials/1.9/uploader/

– jQuery HTML5 Uploader:

http://www.igloolab.com/jquery-html5-uploader/

– jQuery, PHP i tworzenie paska postępu uploadu plików:

http://www.9lessons.info/2012/04/file-upload-progress-bar-with-jquery.html

A dla zainteresowanych technologią Adobe AIR polecam:

Tutorial Adobe AIR: aplikacja do backupu plików na serwer

Podsumowanie

I na tym kończymy dzisiejszy artykuł o upload’owaniu plików w JavaScript. Zaprezentowane rozwiązanie bazuje na pluginie jQuery Uploadify, przedstawiono także kilka innych rozwiązań.

Wybierając jedno z tych rozwiązań wzbogacimy interfejs funkcjonalności uploadu w naszym projekcie, wystarczy je dostosować.

Dziękuję za uwagę.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.