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

Programlama Php
, , , ,
4

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: https://phpdemo.sorucevap.com/selcukkilic/resimyukle/
Github kodları: sorucevap-php/selcukkilic/resimyukle at main · KilicSelcuk/sorucevap-php · GitHub

Bu rehberde kullanılan teknolojiler:

  • HTML
  • Bootstrap
  • CSS
  • jQuery
  • PHP