Resim yükleme işlevselliği web uygulamasında yaygın olarak kullanılır ve PHP kullanılarak kolayca uygulanabilir. Ancak, sayfa yenileme işlevi olmadan görüntü yükleme işlevini uygulamak istiyorsanız, PHP ile jQuery ve Ajax gerekir. Sayfayı yenilemeden görüntü yükle, web uygulaması için kullanıcı dostu bir arayüz sağlar. Ajax dosya yüklemesiyle, kullanıcı mevcut sayfayı yeniden yüklemeden veya yenilemeden görüntü yükleyebilir.
Genellikle, dosya giriş alanı bir kerede tek bir görüntü yükler. Ancak bazı durumlarda, web uygulamanız kullanıcının aynı anda birden fazla görüntü yüklemesine izin vermeyi gerektirir. Bu eğiticide, jQuery, Ajax ve PHP kullanarak sayfa yenileme olmadan birden fazla resmin nasıl yükleneceğini göstereceğiz. Ajax çoklu görüntü yüklemesi, kullanıcının aynı anda birden fazla görüntü dosyası seçmesine ve tüm görüntüleri tek bir tıklamayla sunucuya yüklemesine izin verir.
Örnek kod, jQuery, Ajax ve PHP kullanarak sayfa yenilemeden aynı anda birden fazla görüntü yüklemenize yardımcı olur. Sayfayı yenilemeden çoklu resim yüklemesini basitleştirir. Yüklenen resimlerin önizlemesini görüntülemenin iki yolu vardır. Yüklenen görüntüleri sunucunun bir dizininde veya bir dizininde saklayabilirsiniz.
Birden Çok Dosya Yükleme Formu
Dosya yükleme formu oluşturmak için HTML’yi ve görüntüleri yükleme için sunucu tarafına göndermek için jQuery’yi kullanacağız.
JavaScript Kodu:
JQuery Form Plugin, Ajax aracılığıyla dosya verilerini göndermek için kullanılacaktır. AJAX kullanmak için HTML dosya yükleme formunu yükseltmenizi sağlar. Bu yüzden, jQuery Ajax kullanarak yüklenecek dosyaları içeren formu göndermek için jQuery kütüphanesini ve jQuery Form Eklentisini ekleyin.
jquery, ajaxFrom eklentisi ve standart HTML sayfasını aşağıdaki gibi oluşturuyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tasarım Kodlama</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script> <script src="http://malsup.github.io/min/jquery.form.min.js"></script> </head> <body> <div class="container"> <!-- kodlar burada olacak --> </div> </body> </html> |
JQuery Form Plugin’in ajaxForm yöntemi, HTML formunu AJAX gönderimi için hazırlar. Herhangi bir $ .ajax seçeneği, ajaxForm() işlevinde geçilebilir.
target- Sunucu yanıtıyla güncellenecek öğeleri belirtin.
beforeSubmit – Form göndermeden önce çağrılan geri çağırma işlevi.
success – Yanıt sunucudan döndürüldükten sonra çağrılan geri çağırma işlevi.
error – Bir hata oluştuğunda çağrılan geri çağırma işlevi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('#uploadForm').ajaxForm({ target:'#resimGaleri', beforeSubmit:function(){ $('#upladDurum').html('<img src="loading.gif"/>'); }, success:function(){ $('#resimler').val(''); $('#upladDurum').html(''); }, error:function(){ $('#upladDurum').html('Resimler yüklenirken hata oldu, lütfen tekrar deneyin'); } }); }); </script> |
HTML Kodu:
Kullanıcının yüklemek istediği birden fazla görüntüyü seçmesine izin vermek için bir giriş alanına sahip bir HTML formu oluşturun.
<form> etiketi bu özellikleri içermelidir – method=”post” ve enctype=”multipart/form-data”
<input> etiketi, type=”file” ve birden çok nitelik içermelidir. <input> etiketinin name değeri birden fazla dosya gönderilecekse [] içermelidir. (Dizi olarak gideceğini gösterir)
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- resim yükleme --> <form method="post" id="uploadForm" enctype="multipart/form-data" action="upload.php"> <label>Resim Seç</label> <input type="file" name="resimler[]" id="resimler" multiple > <input type="submit" name="submit" value="YÜKLE"/> </form> <!-- loading resmini göster gizle --> <div id="upladDurum"></div> |
Yüklenen Resim göstermek için: ajaxForm’unda tanımlanan hedef kimliğe sahip div (resimGaleri) oluşturun. Yüklenen resimler bu bölümde gösterilecektir.
|
1 2 3 4 |
<!-- yüklenen resimleri göster --> <div class="row" id="resimGaleri"></div> |
PHP ile Birden Çok Resim Yükle (upload.php)
upload.php dosyası, PHP kullanarak çoklu resim yüklemesini işler ve yüklenen resimleri galeri görünümünde oluşturur.
Dosya yükleme yolunu belirtin.
PHP’de pathinfo() işlevini kullanarak dosya uzantısını alın ve kullanıcının yalnızca resim dosyalarını seçip seçmediğini kontrol edin.
PHP’deki move_uploaded_file() işlevini kullanarak görüntüleri sunucuya yükleyin.
Yüklenen resimlerin galeri görünümünü oluşturun. Bu görünüm ajaxForm’un hedef öğesinde gösterilecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php if(isset($_POST['submit'])){ // yuklenecek dizin ve dosya uzantıları $hedefDizin = "yukleme/"; $dosyaTuru = array('jpg','png','jpeg','gif'); $resimDizi = array(); foreach($_FILES['resimler']['name'] as $key=>$val){ $_name = $_FILES['resimler']['name'][$key]; $_tmp_name = $_FILES['resimler']['tmp_name'][$key]; $_size = $_FILES['resimler']['size'][$key]; $_type = $_FILES['resimler']['type'][$key]; $_error = $_FILES['resimler']['error'][$key]; // hedef yolu belirle $dosyaAdi = basename($_FILES['resimler']['name'][$key]); $hedefYol = $hedefDizin . $dosyaAdi; // Dosya uzantısını kontrol et $dosyaUzanti = pathinfo($hedefYol,PATHINFO_EXTENSION); if(in_array($dosyaUzanti, $dosyaTuru)){ // Sunucuya kaydet if(move_uploaded_file($_FILES['resimler']['tmp_name'][$key],$hedefYol)){ $resimDizi[] = $hedefYol; } } } // Galeride gösterilecek kısmı oluştur. not:bootstrap kullanıldı if(!empty($resimDizi)){ ?> <?php foreach($resimDizi as $resim_src){ ?> <div class="col-md-4"> <img src="<?php echo $resim_src; ?>" class="img-fluid" alt=""> </div> <?php } ?> <?php } } |
PHP Çoklu Dosya Yükleme Kodların Tümü
Kodların yazımı tamamlandığında aşağıdaki gibi iki tane dosya ve kodlar oluşacaktır.
NOT: Yükleme yapılan dizinde yukleme adında bir klasör oluşturmayı unutmayın.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tasarım Kodlama</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script> <script src="http://malsup.github.io/min/jquery.form.min.js"></script> </head> <body> <div class="container"> <!-- resim yükleme --> <form method="post" id="uploadForm" enctype="multipart/form-data" action="upload.php"> <label>Resim Seç</label> <input type="file" name="resimler[]" id="resimler" multiple > <input type="submit" name="submit" value="YÜKLE"/> </form> <!-- loading resmini göster gizle --> <div id="upladDurum"></div> <!-- yüklenen resimleri göster --> <div class="row" id="resimGaleri"></div> </div> <script> $(document).ready(function(){ $('#uploadForm').ajaxForm({ target:'#resimGaleri', beforeSubmit:function(){ $('#upladDurum').html('<img src="loading.gif"/>'); }, success:function(){ $('#resimler').val(''); $('#upladDurum').html(''); }, error:function(){ $('#upladDurum').html('Resimler yüklenirken hata oldu, lütfen tekrar deneyin'); } }); }); </script> </body> </html> |
upload.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php if(isset($_POST['submit'])){ // yuklenecek dizin ve dosya uzantıları $hedefDizin = "yukleme/"; $dosyaTuru = array('jpg','png','jpeg','gif'); $resimDizi = array(); foreach($_FILES['resimler']['name'] as $key=>$val){ $_name = $_FILES['resimler']['name'][$key]; $_tmp_name = $_FILES['resimler']['tmp_name'][$key]; $_size = $_FILES['resimler']['size'][$key]; $_type = $_FILES['resimler']['type'][$key]; $_error = $_FILES['resimler']['error'][$key]; // hedef yolu belirle $dosyaAdi = basename($_FILES['resimler']['name'][$key]); $hedefYol = $hedefDizin . $dosyaAdi; // Dosya uzantısını kontrol et $dosyaUzanti = pathinfo($hedefYol,PATHINFO_EXTENSION); if(in_array($dosyaUzanti, $dosyaTuru)){ // Sunucuya kaydet if(move_uploaded_file($_FILES['resimler']['tmp_name'][$key],$hedefYol)){ $resimDizi[] = $hedefYol; } } } // Galeride gösterilecek kısmı oluştur. not:bootstrap kullanıldı if(!empty($resimDizi)){ ?> <?php foreach($resimDizi as $resim_src){ ?> <div class="col-md-4"> <img src="<?php echo $resim_src; ?>" class="img-fluid" alt=""> </div> <?php } ?> <?php } } |
Çok kaliteli bir bilgi. Çok teşekkürler
çalışmıyıor. sayfada ne css nede js kodları çalışmıyor. toplu değil tekil dosya yükleniyor. gereksiz
ÇALIŞTIRAMIŞSINIZ. Yükleme yaptığınız dizinde yukleme adında bir klasör oluşturup tekrardan yüklemeyi deneyin. Makaleyi dikkatli inceleyin. Makalenin sonunda çalışan bir video paylaştım.
resim sayısını sınırlandırabilirmiyiz