All Free <Script>

18 Ottobre 2018        

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

<script language="Javascript">
    var caricaFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

<input name="file" type="file" accept="image/*" onchange="caricaFile(event)">
<img src="default.gif" border="0" id="output">