In questo tutorial vedremo come utilizzare il plugin jQuery Upload File per creare un form di upload per più file con delle progress bar che mostrino la percentuale di completamento dell’upload.

Prima di cominciare, però, è necessario capire come funziona il plugin jQuery Multiple File Upload.

Sintassi del plugin:

  var settings = {
    url: "upload.php",
    method: "POST",
    allowedTypes:"jpg,png,gif,doc,pdf",
    fileName: "myfile",
    multiple: true,
    onSuccess:function(files,data,xhr)
    {
        //files: list of files uploaded
        //data: response from server
        //xhr : jquer xhr object
    },
    onError: function(files,status,errMsg)
    {
        //files: list of files
        //status: error status
        //errMsg: error message
    }
}
var uploadObj = $("#uploadDivId").uploadFile(settings);

url: Url della pagina php che gestisce l’upload.
method: Metodo utilizzato dal form, di default “POST”.
enctype: Tipo di codifica utilizzato dal form, di default “multipart/form/data”.
formData: Dati supplementari che devo essere inviati insieme ai file.
allowedTypes: Estensioni dei file ammesse, ad esempio “jpf, png, mp3…”
fileName: Nome del file in ingresso.
multiple: Da settare con il parametro “true” se si vogliono caricare più file, come in questo caso.
onSucces: Questa funzione verrà richiamata quando l’upload sarà completato.
onError: Questa funzione varrà richiamata se l’upload fallirà.

Bene, imparato a configurare il plugin, possiamo vedere come implementarlo in una pagina html!

1) Inseriamo il seguente codice all’interno del tag head nella nostra pagina.

<link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js"></script>

Questo codice serve per richiamare il foglio di stile ed alcune librerie del plugin.

 

2) Aggiungiamo un “div” all’interno del tag body per inserire il plugin.

<div id="mulitplefileuploader">Upload</div>

 

3) Quando la pagina sarà stata completamente caricata, inizializziamo il plugin.

var settings = {
    url: "YOUR_MULTIPE_FILE_UPLOAD_URL",
    method: "POST",
    allowedTypes:"jpg,png,gif,doc,pdf,zip",
    fileName: "myfile",
    multiple: true,
    onSuccess:function(files,data,xhr)
    {
        alert("Upload success");
    },
    onError: function(files,status,errMsg)
    {      
        alert("Upload Failed");
    }
}
 
$("#mulitplefileuploader").uploadFile(settings);

 

Mettiamo tutto insieme all’interno di un file html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://rawgithub.com/hayageek/jquery-upload-file/master/css/uploadfile.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://rawgithub.com/hayageek/jquery-upload-file/master/js/jquery.uploadfile.min.js"></script>
</head>
<body>
 
<div id="mulitplefileuploader">Upload</div>
 
<div id="status"></div>
<script>
 
$(document).ready(function()
{
 
var settings = {
    url: "upload.php",
    method: "POST",
    allowedTypes:"jpg,png,gif,doc,pdf,zip",
    fileName: "myfile",
    multiple: true,
    onSuccess:function(files,data,xhr)
    {
        $("#status").html("<font color='green'>Upload is success</font>");
 
    },
    onError: function(files,status,errMsg)
    {      
        $("#status").html("<font color='red'>Upload is Failed</font>");
    }
}
$("#mulitplefileuploader").uploadFile(settings);
 
});
</script>
</body>

Dopo aver creato la pagina html con il form di upload, dobbiamo creare uno script php che carichi sul server i documenti che sono stati inviati.

Il codice sorgente del documento php è il seguente:

<?php
//If directory doesnot exists create it.
$output_dir = "uploads/";
 
if(isset($_FILES["myfile"]))
{
	$ret = array();
 
	$error =$_FILES["myfile"]["error"];
   {
 
    	if(!is_array($_FILES["myfile"]['name'])) //single file
    	{
       	 	$fileName = $_FILES["myfile"]["name"];
       	 	move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);
       	 	 //echo "<br> Error: ".$_FILES["myfile"]["error"];
 
	       	 	 $ret[$fileName]= $output_dir.$fileName;
    	}
    	else
    	{
    	    	$fileCount = count($_FILES["myfile"]['name']);
    		  for($i=0; $i < $fileCount; $i++)
    		  {
    		  	$fileName = $_FILES["myfile"]["name"][$i];
	       	 	 $ret[$fileName]= $output_dir.$fileName;
    		    move_uploaded_file($_FILES["myfile"]["tmp_name"][$i],$output_dir.$fileName );
    		  }
 
    	}
    }
    echo json_encode($ret);
 
}
 
?>

 

NB: Assicuratevi che la directory uploads abbia i permessi di scrittura affinchè i file possano essere scritti all’interno.