JQuery, Ajax ve PHP kullanarak Çoklu Resim Yükle – Tasarım Kodlama
Jquery PHP

JQuery, Ajax ve PHP kullanarak Çoklu Resim Yükle

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.

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.

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)

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.

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.

 

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.

index.html

upload.php

 

 

 

 

Yorum bırak