Obsługa uploadu plików za pomocą obszaru dropzone w JavaScript

Aby tego dokonać możemy użyć poniższego kodu.

<script>
function uploadFiles(plik) {

	var xhr = new XMLHttpRequest();
	var fd = new FormData();

	xhr.open("POST", '/service.php', true);
	xhr.onload = function () {
		if ( xhr.status === 200 ){
	  	alert(xhr.responseText);
		}
	}
	fd.append('pliki', plik);
	xhr.send(fd);
}

var dropzone = document.getElementById("dropzone");

dropzone.ondragover = dropzone.ondragenter = function (e) {
	e.stopPropagation();
	e.preventDefault();
}

dropzone.ondrop = function (e) {
	e.preventDefault();
	e.stopPropagation();
	var plikiTab = e.dataTransfer.files;

	for (var a=0; a < plikiTab.length; a++) {
		uploadFiles(plikiTab[a]);
	}
}
</script>
<div id="dropzone">Przeciągnij i upuść pliki tutaj.</div>

Jedyne co musimy zrobić to przygotować plik PHP, który obsłuży nam wysłany plik.

Źródło: Kod perfidnie ukradziony z internetu.

~xf0r3m