Vediamo come realizzare un upload multiplo, in un unico file php ad esempio upload.php, con le anteprime delle immagini prima di essere caricate sul server. Di seguito lo script:
Codice html
<form name="uploadform" enctype="multipart/form-data" action="" method="post">
<input id="files" name="file[]" type="file" multiple="multiple" accept="image/*" />
<input type="submit" name="invio" value="Invia">
<div id="selectedFiles"></div>
</form>
Codice javascript per la visualizzazione delle anteprime delle immagini da inserire dopo la chiusura del tag </form>
<script type="text/javascript">
var selDiv = "";
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('#files').addEventListener('change', handleFileSelect, false);
selDiv = document.querySelector("#selectedFiles");
}
function handleFileSelect(e) {
if(!e.target.files || !window.FileReader) return;
selDiv.innerHTML = "";
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
if(!f.type.match("image.*")) {
return;
}
var reader = new FileReader();
reader.onload = function (e) {
var html = "<img src=\"" + e.target.result + "\"><br>" + f.name + "<br>";
selDiv.innerHTML += html;
}
reader.readAsDataURL(f);
});
}
</script>
Codice php per l’invio dei file da inserire prima dell’apertura del tag <form>
<?php
$maxSize = 3000; //massima dimensione dei file in kilobyte
$acceptType = array( //tipi di file accettati, in questo caso solo immagini
'png' => 'image/png',
'jpe' => 'image/jpeg',
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'gif' => 'image/gif',
'bmp' => 'image/bmp',
'ico' => 'image/vnd.microsoft.icon',
);
$cartella = "uploads/"; //cartella dove vengono caricati i file nel server
for($i=0;$i<count ($_FILES['file']['name']);$i++)
echo "Risultato file ".($i+1).": ".multipleUpload($i, $cartella, $maxSize, $acceptType)."<br>";
function multipleUpload($i, $cartella, $maxSize, $acceptType) {
if(@$_FILES['file']['name'][$i] != "") {
$destinazione = $cartella.basename( $_FILES['file']['name'][$i]);
if($_FILES['file']['size'][$i] <= $maxSize*1024) {
if(in_array($_FILES['file']['type'][$i], $acceptType)) {
if(@move_uploaded_file($_FILES['file']['tmp_name'][$i], $destinazione))
return "File caricato con successo!";
else
return "Errore nell'upload del file";
}else
return "Tipo di file non accettato!";
}else
return "Dimensione del file troppo grande, massima dimensione accettata: ".$maxSize." kilobyte";
}elseif(isset($_POST['invio']))
return "Nessun file inserito!";
}
?>
Qui puoi trovare la demo senza la parte lato server php