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ę.
Opublikowano w 
Tags: 
