@_r2d2_Upload plików z wykorzystaniem PHP i AJAX

Upload plików z wykorzystaniem PHP i AJAX

04.08.2014 21:30

Jako webmaster tworzę wiele stron internetowych, czy to dla konkretnych klientów, czy to dla siebie - bardziej dla rozrywki. Do prawie każdej strony tworzę prosty CMS, bo ciężko wymagać aby klient nauczył się HTML i samemu edytował kod strony. O ile stworzenie kilku prostych pól tekstowych do wpisywania treści nie jest wielkim problemem, to inna bardzo popularna forma prezentacji informacji już problemy stwarza. Chodzi oczywiście o grafiki.

Upload plików w PHP

Sam upload plików w PHP jest stosunkowo prosty, jednak jest kilka elementów, na które trzeba zwrócić uwagę. Po pierwsze w formularzu HTML musimy ustawić atrybut enctype na multipart/form-data.

plik index.html

<!DOCTYPE html>
<html>
	<head>
		<title>Upload plików w PHP</title>
		<meta charset="utf-8">
	</head>
	<body>
		<form enctype="multipart/form-data" action="./upload.php" method="post">
			<input type="file" name="plik">
			<input type="submit" value="Wyślij">
		</form>
	</body>
</html>

Po drugie należy dopasować plik php.ini do naszych wymagań. Chodzi głównie o pozycję upload_max_filesize, która domyślnie ma wartość 2M, czyli 2 MB. Niestety tej pozycji nie można edytować funkcją php_ini(), więc trzeba edytować plik konfiguracyjny ręcznie. (Po bardziej szczegółowy opis tego pliku odsyłam na oficjalną stronę PHP. )

Po trzecie musimy utworzyć folder na serwerze, do którego będziemy zapisywać nasze pliki. W moim przypadku jest to folder ./upload. Katalog ten musi mieć prawa dostępu 777 (komenda uniksowa: $ chmod -R 777 /ścieżka/do/katalogu/upload). Gdy już z tym się uporamy możemy zabrać się za kod PHP.

plik upload.php

<?php
/* utworzenie zmiennych */
$folder_upload="./upload";
$plik_nazwa=$_FILES['plik']['name'];
$plik_lokalizacja=$_FILES['plik']['tmp_name']; //tymczasowa lokalizacja pliku
$plik_mime=$_FILES['plik']['type']; //typ MIME pliku wysłany przez przeglądarkę
$plik_rozmiar=$_FILES['plik']['size'];
$plik_blad=$_FILES['plik']['error']; //kod błędu

/* sprawdzenie, czy plik został wysłany */
if (!$plik_lokalizacja) {
	exit("Nie wysłano żadnego pliku");
}

/* sprawdzenie błędów */
switch ($plik_blad) {
	case UPLOAD_ERR_OK:
		break;
	case UPLOAD_ERR_NO_FILE:
		exit("Brak pliku.");
		break;
	case UPLOAD_ERR_INI_SIZE:
	case UPLOAD_ERR_FORM_SIZE:
		exit("Przekroczony maksymalny rozmiar pliku.");
		break;
	default:
		exit("Nieznany błąd.");
		break;
}

/* sprawdzenie rozszerzenia pliku - dzięki temu mamy pewność, że ktoś nie zapisze na serwerze pliku .php */
$dozwolone_rozszerzenia=array("jpeg", "jpg", "tiff", "tif", "png", "gif");
$plik_rozszerzenie=pathinfo(strtolower($plik_nazwa), PATHINFO_EXTENSION);
if (!in_array($plik_rozszerzenie, $dozwolone_rozszerzenia, true)) {
	exit("Niedozwolone rozszerzenie pliku.");
}

/* przeniesienie pliku z folderu tymczasowego do właściwej lokalizacji */
if (!move_uploaded_file($plik_lokalizacja, $folder_upload."/".$plik_nazwa)) {
	exit("Nie udało się przenieść pliku.");
}

/* nie było błędów */
echo "Plik został zapisany.";
?>

Dodajmy trochę JavaScriptu, czyli pasek postępu

Nasz system wysyłania plików działa dobrze, jednak brakuje mu jednej prozaicznej rzeczy. Wyobraźcie sobie, że jesteście w roli tzw. "zwykłego użytkownika". Chcecie wrzucić zdjęcie do waszego serwisu, więc wybieracie je z dysku, klikacie Wyślij i… czekacie. Macie powolne łącze, więc czekacie już minutę i nie wiecie, czy strona jeszcze działa, czy się zawiesiła. Nie wiecie ile jeszcze musicie czekać. Właśnie dlatego praktycznie obowiązkowym elementem przy tego typu formularzach jest pasek postępu, który będzie pokazywał użytkownikowi stan wysyłania jego plików.

Do tej pory, gdy chcieliśmy udostępnić takie dobrodziejstwo na naszej stronie musieliśmy użyć Flasha bądź Silverlighta. Jednak HTML5 daje nam takie możliwości w standardzie ;‑)

plik index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Upload plików w PHP</title>
        <meta charset="utf-8">
		<script src="./upload.js"></script>
    </head>
    <body>
        <form enctype="multipart/form-data" action="upload.php" method="post">
            <input type="file" name="plik" id="plik">
            <input type="button" value="Wyślij" onclick="wyslijPlik()">
        </form>
		<section>
			<h3>Postęp wysyłania</h3>
			<output id="status">Wybierz plik i naciśnij <i>Wyślij</i>.</output>
			<progress value="0" max="100" id="postep"></progress>
		</section>
    </body>
</html>

plik upload.js

function wyslijPlik() {
	var plik=document.getElementById("plik").files[0];
	
	var formularz=new FormData(); //tworzymy nowy formularz do wysłania
	formularz.append("plik", plik); //dodajemy do formularza pole z naszym plikiem
	
	/* wysyłamy formularz za pomocą AJAX */
	var xhr=new XMLHttpRequest();
	xhr.upload.addEventListener("progress", postepWysylania, false);
	xhr.addEventListener("load", zakonczenieWysylania, false);
	xhr.addEventListener("error", bladWysylania, false);
	xhr.addEventListener("abort", przerwanieWysylania, false);
	xhr.open("POST", "./upload.php", true);
	xhr.send(formularz);
}

function postepWysylania(event) {
	var procent=Math.round((event.loaded/event.total)*100);
	document.getElementById("status").innerHTML="Wysłano "+konwersjaBajtow(event.loaded)+" z "+konwersjaBajtow(event.total)+" ("+procent+"%)";
	document.getElementById("postep").value=procent;
}

function zakonczenieWysylania(event) {
	document.getElementById("status").innerHTML=event.target.responseText;
}

function bladWysylania(event) {
	document.getElementById("status").innerHTML="Wysyłanie nie powiodło się";
}

function przerwanieWysylania(event) {
	document.getElementById("status").innerHTML="Wysyłanie zostało przerwane";
}

function konwersjaBajtow(bajty) {
	var kilobajt=1024;
	var megabajt=kilobajt*1024;
	var gigabajt=megabajt*1024;
	var terabajt=gigabajt*1024;
	
	if (bajty>=0 && bajty<kilobajt) return bajty+" B";
	else if(bajty>=kilobajt && bajty<megabajt) return Math.round(bajty/kilobajt)+" kB";
	else if(bajty>=megabajt && bajty<gigabajt) return Math.round(bajty/megabajt)+" MB";
	else if(bajty>=gigabajt && bajty<terabajt) return Math.round(bajty/gigabajt)+" GB";
	else if(bajty>=terabajt) return Math.round(bajty/terabajt)+" TB";
	else return bajty+" B";
}