Dosya Yükleme Ve İlerleme Çubuğu

Kullanıcıların dosyalarını yüklerken ilerleme durumunu görmeleri ve yükleme işlemini takip etmeleri, kullanıcı deneyimini büyük ölçüde iyileştirebilir.

1. Dosya Yükleme Formu Oluşturma:

Öncelikle, kullanıcıların dosyalarını yükleyebilecekleri bir form oluşturalım.

<form id="dosyaYukleFormu" action="dosya_yukle.php" method="post" enctype="multipart/form-data">
    <input type="file" name="dosya" id="dosyaInput">
    <button type="submit" id="yukleBtn">Dosya Yükle</button>
</form>

2. AJAX ile Dosya Yükleme İşlemi:

Dosya yükleme işlemini AJAX kullanarak gerçekleştirelim. Bunun için jQuery kullanacağız.

$('#dosyaYukleFormu').submit(function(event){
    event.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total * 100;
                    $('#ilerlemeCubugu').text(percentComplete + '%');
                }
            }, false);
            return xhr;
        },
        success: function(response) {
            // Yükleme tamamlandığında yapılacak işlemler
        },
        error: function(xhr, status, error) {
            // Yükleme hatası durumunda yapılacak işlemler
        }
    });
});

3. İlerleme Durumunu Gösterme:

Dosya yükleme işlemi sırasında ilerleme durumunu göstermek için bir <div> öğesi oluşturalım.

<div id="ilerlemeCubugu"></div>

4. Sunucu Tarafı (dosya_yukle.php):

Dosyaları sunucuya yüklemek için bir PHP betiği oluşturalım.

<?php
$dosyaAdi = $_FILES['dosya']['name'];
$geciciYol = $_FILES['dosya']['tmp_name'];
$hedefKlasor = 'uploads/';
$hedefYol = $hedefKlasor . $dosyaAdi;

move_uploaded_file($geciciYol, $hedefYol);

echo 'Dosya başarıyla yüklendi: ' . $hedefYol;
?>

Dosya yükleme işlemi ve ilerleme durumunu gösterme, kullanıcı deneyimini geliştiren önemli özelliklerden biridir. İlerleme durumunu göstermek, kullanıcıların dosya yükleme işlemlerini takip etmelerini sağlar ve kullanıcıya güven verir. Bu özellikleri kullanarak, web uygulamanızın kullanıcı dostu bir deneyim sunmasını sağlayabilirsiniz.