Încărcare multiplă de imagini cu jQuery AJAX and PHP / Upload Multiple Images with jQuery AJAX and PHP

Cu acest script puteți face upload de imagini pe site fără să se mai reîncarce pagina cu fomularul.

1. Codul HTML

Partea afișată utilizatorului

Vom adăuga câteva proprietăți pentru previzualizarea imaginilor încărcate.

<style type="text/css">
    img {
        height:100px;
        width: auto;
        margin: 5px;
    }
</style>

După ce imaginile vor fi încărcate, se vor afișa cu înălțimea fixă de 100 pixeli și un spațiu în jurul lor de 5 pixeli.

Următorul pas este să creăm un "input" de tip "file" cărui îi vom seta numele și id-ul ca fiind poze și îi vom adăuga atributul "multiple" pentru a putea încărca mai multe imagini simultan.

<input type="file" name="poze" id="poze" multiple/>

Tot ce mai trebuie scris la partea de HTML este secțiunea paginii unde vor fi afișate rezultatele încărcării. Vom creea o secțiune html de tip div cu id-ul "arataPozele".

<div id="arataPozele"></div>

Codul complet

<style type="text/css">
    img {
        height:100px;
        width:auto;
        margin: 5px;
    }
</style>
<input type="file" name="poze" id="poze" multiple/>
<div id="arataPozele"></div>

2. Script jQuery AJAX

În momentul schimbării input-ului cu id-ul "poze" se va creea un obiect FormData() si se vor număra fișierele selectate. Va rula o funcție de tip loop pentru fișierele selectate și se vor adăuga în obiect. Obiectul va fi trimis cu o cerere AJAX POST catre fisierul incarcaPoze.php. Modificați lista de fișiere acceptate după bunul plac, modificând array-ul fisiereAcceptate. În cazul în care un fișier nu face parte din această listă, scriptul va afișa o eroare pentru fișierul respectiv. Dacă cererea Ajax a avut loc cu succes atunci in div-ul cu id-ul "arataPozele" vor fi afișate pozele încărcate.

Codul complet

<script>
$("#poze").change(function(){ 
    var poze = $("#poze")[0].files;
    var eroare = "";
    var form_data = new FormData();
    var fisiereAceptate = ["jpg","jpeg"];

    for(var count = 0; count<poze.length; count++){
        var name = poze[count].name;
        var extensie = name.split(".").pop().toLowerCase();

        if(jQuery.inArray(extensie, fisiereAceptate) == -1){
            eroare += "Fisierul " + name + " nu este valid"
        }
        else{
            form_data.append("poze[]", poze[count]);
        }
    }
    if(eroare == ""){
        $.ajax({
            url: "incarcaPoze.php",
            method:"POST",
            data:form_data,
            contentType:false,
            cache:false,
            processData:false,
            beforeSend:function(){
                $("#arataPozele").html("<label>Se încarcă...</label>");
            },success:function(data){
                $("#arataPozele").html(data);
                $("#poze").val("");
            }
        })
    }
    else{
        alert(eroare);
    }
});
</script>

3. Fișierul PHP

Fișierul PHP verifică dacă există fișiere in variabila globală $_FILES, iar dacă există, acestea vor fi băgate în funcție de tip loop pentru a putea face upload-ul in directorul specificat și pentru a arăta pozele în div-ul din pagina html.

<?php
if($_FILES){
    foreach($_FILES['poze']['tmp_name'] as $key => $tempName){
        $director = 'imaginiIncarcate/';
        $numeFisier = $director.$_FILES['poze']['name'][$key];
        $poza = addslashes($tempName);
        $poza = file_get_contents($poza);
        file_put_contents($numeFisier ,$poza);
        echo '<img src="'.$numeFisier.'"/>';
    }
}
?>

4. Rezultatul final

Fișiere atașate articolului

Dacă ți-a plăcut articolul, ajută-ne cu un share:
Distribuie Tweet Whatsapp Telegram

Citește și alte articole legate de imagini multiple, jquery, php, ajax, multiple uploads