PHP ile çoklu Resim Seçme ve Yükleme

Bir Forma birden fazla resim yüklemem lazım. Tek bir resmi yükleyebilliyorum ama 15-20 resmi yüklemem lazım. Bunları seçme ve yüklemesini nasıl yapabilirim?

Form kısmındaki resim yükleme form elementini bu şekilde yapman lazım:

<input type="file" name="files[]" multiple/>

Böylece resim yükleme ekranına birden fazla resim seçebilirsin. Sonrasında php kısmında da aşağıdaki şekilde seçtiğin resimleri alabilirsin:

$hata=array();
$izin_verilen_resim_uzantilari=array("jpeg","jpg","png","gif");
$yuklenecek_klasor_ismi= "resim_galerisi";

foreach($_FILES["files"]["tmp_name"] as $key=>$tmp_name) {
    $resim_ismi=$_FILES["files"]["name"][$key];
    $resim_tmp_yolu=$_FILES["files"]["tmp_name"][$key];
	
	// uzanti kontrolu icin uzantiyi aliriz
    $resim_uzantisi=pathinfo($resim_ismi,PATHINFO_EXTENSION);

	// yuklenmeye calisilan resim uzantisina izin veriliyorsa bu kisim calisir.
    if(in_array($resim_uzantisi,$izin_verilen_resim_uzantilari)) {
		
		// Resmi yukleyecegin klasorde ayni isimde resim varmi yokmu kontrolu yapariz
        if(!file_exists($yuklenecek_klasor_ismi."/".$txtGalleryName."/".$resim_ismi)) {
            move_uploaded_file($resim_tmp_yolu=$_FILES["files"]["tmp_name"][$key],$yuklenecek_klasor_ismi."/".$txtGalleryName."/".$resim_ismi);
        
		// eger resim yuklenecek klasorde varsa asagidaki kodlarla resim ismini degistirerek yukluyoruz,
		// boylece onceki resmin uzerine yazmaz
		}else {
            $filename=basename($resim_ismi,$resim_uzantisi);
            $yeni_resim_ismi=$filename.time().".".$resim_uzantisi;
            move_uploaded_file($resim_tmp_yolu=$_FILES["files"]["tmp_name"][$key],$yuklenecek_klasor_ismi."/".$txtGalleryName."/".$yeni_resim_ismi);
        }
		
	// Yuklenmeye calisilan resim uzantisina izin verilmiyorsa buradan hata degiskenine kaydederiz.
    }else{
        array_push($hata,"$resim_ismi, ");
    }
}

//$hata degiskenini ekrana yazdirarak hatali resim isimlerini gorebilirsin.

Kod içerisinde elimden geldiğince açıklama yapmaya çalıştım, umarım anlaşılabilir. Kaynak kodlarını örnek aldığım stackoverflow gönderisinide kontrol edebilirsin.

Ayrıca benim tavsiyem resim upload için iyi bir class kullanmanız ki ben bir ara uzun zaman verot resim yükleme class 'ını kullandım ve bununla yapamayacağınız bir işlem yok (Örnek demo). Ayrı olarak resimler üzerinde tam kontrol sağlayabiliyorsunuz, watermark ekleme, resim renklerini düzenleme, yüklenen resimlerin güvenli olup olmadığını kontrol etme, yükleme limiti koyma, resimleri boyutlandırma vs. daha bir çok şey. Örnek kod ve yapı sitesinde mevcut, eğer anlamadığın bir konu olursa yeni bir soru oluşturarak konu açabilirsin, detaylı bir incelemeden sonra anlaşılır bir cevap oluşturabilirim ilk fırsatta.

1 Beğeni

Teşekkür ederim, class kullanmak çok işime yarayacaktır.

2 Beğeni

Resim Seçme ve Yükleme Sistemi

Bu projede PHP, HTML, Bootstrap ve jQuery kullanarak, sayfa yenilenmeden çoklu resim seçme ve yükleme işlemini gerçekleştireceğiz. İşlemler sırasında resimlerin önizlemesini gösterecek ve yükleme yüzdesini takip edeceğiz.

Dosyaların Oluşturulması

  1. index.php - Ana sayfa dosyası
  2. resimyukle.php - Resimleri yükleme işlemini gerçekleştiren PHP dosyası
  3. style.css - İstediğimiz özel stilleri ekleyeceğimiz CSS dosyası
  4. script.js - Resim seçimi, önizleme, yükleme işlemleri için JS dosyası

Veritabanının Oluşturulması

Bu projede veritabanı kullanmayacağımız belirtilmiş. Bu yüzden veritabanı modeli oluşturmak, tabloları içe aktarmak gibi işlemler yapmamıza gerek yok.

Ana Sayfa (index.php) Oluşturulması

İlk olarak index.php dosyasının içine aşağıdaki kodu ekleyelim:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resim Yükleme Sistemi</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">Resim Yükleme Sistemi</h1>
        <div class="upload-container">
            <input type="file" id="file-input" multiple>
            <button id="upload-button" class="btn btn-primary">Yükle</button>
        </div>
        <div id="preview-container"></div>
        <div id="upload-progress"></div>
        <div id="upload-results"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Bu HTML kodu, sayfayı tasarlamak için Bootstrap’in CSS dosyasını kullanıyor. Ayrıca script.js dosyasını ve style.css dosyasını çağırıyor.

CSS (style.css) Oluşturulması

Şimdi style.css dosyasını oluşturalım ve aşağıdaki stil bilgilerini içine ekleyelim:

.upload-container {
    margin-top: 20px;
}
#preview-container {
    margin-top: 20px;
}
.preview-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-right: 10px;
    margin-bottom: 10px;
}
#upload-progress {
    margin-top: 20px;
}
#upload-results {
    margin-top: 20px;
}

Bu stil bilgileri, önizleme resimlerinin boyutunu ve diğer bazı öğelerin yerleşimini düzenler.

JavaScript (script.js) Oluşturulması

Şimdi script.js dosyasını oluşturalım ve aşağıdaki kodu ekleyelim:

$(document).ready(function() {
    // Dosya seçildiğinde önizleme yap
    $('#file-input').on('change', function() {
        var files = Array.from($(this)[0].files);
        files.forEach(function(file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#preview-container').append('<img src="' + e.target.result + '" class="preview-image">');
            };
            reader.readAsDataURL(file);
        });
    });

    // Dosyaları yükle
    $('#upload-button').on('click', function() {
        var files = Array.from($('#file-input')[0].files);
        var formData = new FormData();
        files.forEach(function(file) {
            formData.append('files[]', file);
        });

        $('#upload-progress').html('Yükleniyor...');
        $.ajax({
            url: 'resimyukle.php',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            xhr: function() {
                var xhr = new XMLHttpRequest();
                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        var percent = (e.loaded / e.total) * 100;
                        $('#upload-progress').html('Yükleniyor... ' + percent.toFixed(2) + '%');
                    }
                };
                return xhr;
            },
        }).done(function(data) {
            $('#upload-progress').empty();
            $('#upload-results').html(data);
        }).fail(function() {
            $('#upload-progress').html('Yükleme hatası.');
        });
    });
});

Bu JavaScript kodu, resim seçimi, önizleme, yükleme işlemlerinin gerçekleştirilmesini sağlar.

Yükleme PHP Dosyasının (upload.php) Oluşturulması

Son olarak, upload.php dosyasını oluşturalım ve aşağıdaki kodu ekleyelim:

<?php
// Yükleme dizini
$uploadDir = 'uploads/';

// Yüklenen dosyaların isimleri
$filenames = [];

foreach ($_FILES['files']['tmp_name'] as $key => $tmpName) {
    $filename = $_FILES['files']['name'][$key];
    $uploadPath = $uploadDir . $filename;

    if (move_uploaded_file($tmpName, $uploadPath)) {
        $filenames[] = $filename;
    }
}

echo implode('<br>', $filenames);
?>

Bu PHP kodu, yüklenen dosyaları belirtilen bir klasöre taşır ve yüklenen dosya isimlerini geri gönderir.

Sonuç

Yukarıdaki adımları takip ederek, çoklu resim seçme ve yükleme sistemi oluşturduk. Bu sistemde resimlerin önizlemesini gösteriyor, yükleme sırasında yüzdeyi takip ediyor ve yükleme işlemi tamamlandıktan sonra yüklenen resimlerin linklerini görüntülüyoruz.

Demo: Resim Yükleme Sistemi
Github kodları: sorucevap-php/selcukkilic/resimyukle at main · KilicSelcuk/sorucevap-php · GitHub

Bu rehberde kullanılan teknolojiler:

  • HTML
  • Bootstrap
  • CSS
  • jQuery
  • PHP