Upload di file con jquery

Autore: Fabio Di Matteo
Ultima revisione: 26/06/2014 - 23:26

Abbiamo gia' visto come utilizzare Jquery per l'invio di I form con Jquery tramite $.ajax, adesso invece vedremo come caricare interi file su di un server.
Utilizzeremo 2 file index.html che contiene la pagina con il form upload e save.php che contiene un elementare script Php per salvare il file sul server.

La pagina con il form (upload singolo)

index.html

<html >
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Esperimento</title>
<script type="text/javascript">
 
         $(document).ready(function(){
            $("#myform").submit(function(e){ //intercetto il submit del form
 
		e.preventDefault();	//previene l'invio del form tradizionalmente
 
                //raggruppo tutti i campi del form in un oggetto
                var formData = new FormData($(this)[0]); //per i form "multipart/form-data"
 
                $.ajax({
			url: 'save.php',
			type: 'POST',
			data: formData,
			timeout:30000,
			async: true,
			cache: false,
			contentType: false, //per i form "multipart/form-data"
			processData: false, //per i form "multipart/form-data"
			beforeSend: function () {
						  $('#outputServer').html('Upload in corso...');
						  $('#mysubmit').attr("disabled", "disabled");
						},
		        success: function (data) {
						  $('#outputServer').html(data);
						},
			error: function(){
						$('#outputServer').html('Errore nell\' invio...');
					},
			complete: function(){
						$('#mysubmit').removeAttr("disabled");
					},
			xhr: function(){//gestione percentuale di caricamento
					// prende il riferimento all'oggetto nativo 'XmlHttpRequest' 
					var xhr = $.ajaxSettings.xhr() ;
					// callback per l'evento onprogress
					xhr.upload.onprogress = function(evt){ $('#progress').html(Math.round(evt.loaded/evt.total*100)+'%') } ;
					// callback per l'evento 'onload' , ovvero caricamento finito
					xhr.upload.onload = function(){ $('#progress').html('100% - caricamento completato.') };
					// ritorna l'oggetto xhr
					return xhr ;  
					}
 
 
 
			});
 
			return false;					  
		});
 
 
 
 
       });
 
 
</script>
 
</head>
<body>
<form  action="#" id="myform" method="post" enctype="multipart/form-data" accept-charset="utf-8">
    <input type="file" name="myfile" id="myfile"><br>
    <input id="mysubmit" type="submit" value="Upload File to Server">
</form>
 
<div id="progress">0%</div >
 
 
<div id="outputServer" style="border: 1px Solid gray; width: 50%"></div>
 
 
</body>
</html>

Script salvataggio file (upload singolo)

<?php
 
$uploaddir = './files/';
$uploadfile = $uploaddir . basename($_FILES['myfile']['name']);
 
 
echo '<pre>';
if (move_uploaded_file($_FILES['myfile']['tmp_name'], $uploadfile)) {
    echo "Il file e' valido ed e' stato caricato correttamente.\n";
} else {
    echo "Non e' stato caricato alcun file!\n";
}
 
echo 'Alcune informazioni di debug:';
print_r($_FILES);
 
print "</pre><script>$('#progress').html('100% - upload completato')</script>";
 
?>

Upload multiplo di file

L'unica differenza nel file del che contiene il form(rispetto al precedente index.html) è che il campo input deve contenere il tag booleano multiple e il nome dell'attributo seguito dalle parentesi quadre [] che stanno ad indicare un array, in questo modo:

<input type="file" name="myfile[]" id="myfile" multiple>

I file si selezionano tenendo premuto Ctrl e facendo click oppure tenendo premuto shift e facendo clik selezioniamo un intero intervallo di file.

Ecco di seguito invece lo script php per il salvataggio dei dati: save.php

<?php
 
$uploaddir = './files/';
 
 
 
 
for($i=0; $i<count($_FILES['myfile']['name']); $i++) 
{
  //Prende il percorso del file temporaneo
  $tmpFilePath = $_FILES['myfile']['tmp_name'][$i];
 
  //Ci assicuriamo che il percorso non sia vuoto
  if ($tmpFilePath != "")
  {
		//Percorso del file che stiamo salvando
		$uploadfile = $uploaddir . basename($_FILES['myfile']['name'][$i]);
 
		//Proviamo a copiare il file nella posizione "$uploadfile"
		if(move_uploaded_file($tmpFilePath, $uploadfile)) 
		{
 
		}else{
				echo "Non e' stato caricato alcun file!\n";
		}
  }
 
}
 
echo 'Alcune informazioni di debug: <pre>';
print_r($_FILES);
echo '</pre>';
 
 
?>

Upload tramite drag and drop

Di seguito vedremo come trascinare uno o piu' file sun uno specifico div ed eseguire l'upload.

index.html

<html >
<head>
<meta charset="utf-8">
<style>
.dropcss{
    width:300px;
    height:100px;
    line-height:100px;
    border:5px dashed #CCC;
 
    font-family:Verdana;
    text-align:center;
    margin-bottom:15px;
}
</style>
 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Esperimento</title>
<script type="text/javascript">
 
         $(document).ready(function(){
 
					/*Prevengo i comportamenti di default del browser sia in drag over che in drag enter*/
					$('#drop-here').on(
								'dragover',
								function(e) {
									e.preventDefault();
									e.stopPropagation();
								}
							)
					$('#drop-here').on(
						'dragenter',
						function(e) {
							e.preventDefault();
							e.stopPropagation();
						}
					)
 
 
					$('#drop-here').on(
						'drop',
						function(e){
							if(e.originalEvent.dataTransfer){
								if(e.originalEvent.dataTransfer.files.length) {
									e.preventDefault();
									e.stopPropagation();
									/* upload() si occupa di fare l'upload . "e.originalEvent.dataTransfer.files" e' un array che contiene le proprieta' dei file*/
									upload(e.originalEvent.dataTransfer.files);//la funzione che si occupera' di effettuare l'upload (vedi giu')
								}   
							}
						}
					);
					function upload(myfiles){
						//alert('Upload '+myfiles.length+' File(s).');
 
						//Creo un oggetto formdata con e aggiungo i file appena trascinati
						var formData = new FormData(); //per i form "multipart/form-data"
						for (var i = 0; i < myfiles.length; i++) {
						  formData.append('myfile[]', myfiles[i]); //"myfile[]" è il nome del campo che php elaborera', "myfiles[i]" i file presi con il drag and drop
						}
 
 
							$.ajax({
							url: 'save-multiple.php', //oppure save.php
							type: 'POST',
							data: formData,
							timeout:30000,
							async: true,
							cache: false,
							contentType: false, //per i form "multipart/form-data"
							processData: false, //per i form "multipart/form-data"
							beforeSend: function () {
							  $('#outputServer').html('Upload in corso...');
							},
							success: function (data) {
							  $('#outputServer').html(data);
							},
							error: function(){
								$('#outputServer').html('Errore nell\' invio...');
							},
							complete: function(){
							},
							xhr: function(){
											// prende il riferimento all'oggetto nativo 'XmlHttpRequest' 
											var xhr = $.ajaxSettings.xhr() ;
											// callback per l'evento onprogress
											xhr.upload.onprogress = function(evt){ $('#progress').html(Math.round(evt.loaded/evt.total*100)+'%') } ;
											// callback per l'evento 'onload' , ovvero caricamento finito
											xhr.upload.onload = function(){ $('#progress').html('100% - caricamento completato.') };
											// ritorna l'oggetto xhr
											return xhr ;  
										}
 
 
 
						  });
 
 
 
				}
 
 
 
 
 
       });//document ready
 
 
 
 
 
</script>
 
</head>
<body>
<h2>Upload tramite trascina e rilascia con jquery e php</h2>
<div class="dropcss" id="drop-here">Trascina i file qui</div>
 
<div id="progress">0%</div >
<div id="outputServer" style="border: 1px Solid gray; width: 50%"></div>
 
 
</body>
</html>

save-multiple.php

<?php
 
$uploaddir = './files/';
 
 
 
 
for($i=0; $i<count($_FILES['myfile']['name']); $i++) 
{
  //Prende il percorso del file temporaneo
  $tmpFilePath = $_FILES['myfile']['tmp_name'][$i];
 
  //Ci assicuriamo che il percorso non sia vuoto
  if ($tmpFilePath != "")
  {
		//Percorso del file che stiamo salvando
		$uploadfile = $uploaddir . basename($_FILES['myfile']['name'][$i]);
 
		//Proviamo a copiare il file nella posizione "$uploadfile"
		if(move_uploaded_file($tmpFilePath, $uploadfile)) 
		{
 
		}else{
				echo "Non e' stato caricato alcun file!\n";
		}
  }
 
}
 
echo 'Alcune informazioni di debug: <pre>';
print_r($_FILES);
echo '</pre>';
 
 
?>

..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

..::Freemedialab::..

Barra laterale

Categorie principali

Repository

Indice

Upload di file con jquery

La pagina con il form (upload singolo)

Script salvataggio file (upload singolo)

Upload multiplo di file

Upload tramite drag and drop

..::Freemedialab::.. «Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»

..::Freemedialab::..

Strumenti Utente

Strumenti Sito

Barra laterale

Categorie principali

Repository

Indice

Upload di file con jquery

La pagina con il form (upload singolo)

Script salvataggio file (upload singolo)

Upload multiplo di file

Upload tramite drag and drop

Strumenti Pagina

..::Freemedialab::..

«Un buon posto per approfondire in piena libertà e condivisione la propria passione verso l'informatica.»