
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ę.