Ajax ve PHP ile Fotoğraf Yükleme

Ajax ve PHP ile Fotoğraf Yükleme

Herkese iyi çalışmalar, bu projemizde web sitemizde yada ufak bir projede Ajax ve PHP yardımıyla footoğraf ve resim yükleme yönteminden bahsedeceğim.

Bu proje sayesinde JavaScript jQuery ile dinamik ve hızlı bir fotoğraf yükleme işlemi yapacak, aynı zamanda seçili fotoğrafımızın anlık görüntüleme işlemini yapacağız.

Gelelim yapımına;

Projemiz 3 ana dosya üzerinde çalışmakta, bunlar; index.php, upload.js ve upload.php

İndex.php sayfamızda seçili fotoğrafı görüntüleme ve form ile gönderme işlemi yapacağız.

Upload.js ile seçilen fotoğrafı jquery change fonksiyonu ile dinleme yaparak ajax ile post etme işlemini barındıracağız

Upload.php dosyasında ise ajax ile post edilen fotoğrafımızı bir dizi işlemden sonra belirtilen dosyaya kaydetme işlemlerini gerçekleştireceğiz.

İndex.php sayfamız; index sayfasında form içerisinde 4 element bulunuyor Bunlar; input=file, img=fotoğraf arayüzü için, button=submit işlemini başlatmak için.

Ayrıca ilgili işlemin yazı olarak ekrana göndermek için id değeri #text olan div tagımız bulunmakta.


Upload.js; burada öncelikle input=file dosya seçim esnasında değişikliği dinmemiz gerekiyor bunu da id değeri #imgInp ile change fonksiyonunu devreye sokarak readURL() adlı fonksiyonu çağırıyoruz.

    

Bu fonksiyonun görevi input ile seçilen fotoğrafın temp dosyasından çağrılarak base64 kodlamasıyla img=src alanına yerleştirmek id değeri #temp olan img tagına yerleştirmek.

Sonraki aşama fotoğrafı submit etmek yani göndermek;

Submit işlemini ekle butonuna basıldığı takdirde id değeri #f_ekle olan form içerisindeki input=file elementimizi ajax ile upload.php sayfasına gönderiyor. Data parametresine formun kendisini new FormData(this) belirterek ve Type parametresini POST olarak tanımlıyoruz.

Son olarak Success parametresini dinleyerek sonucun “ok” olması durumunda index.php sayfasında bir takım uyarılar belirtiyoruz.

Upload.php;

Upload dosyamızda ajax ile post edilen fotoğrafımızın öncelikle varlığını daha sonra önceden belirlediğimiz formatlar (jpeg,png vs.) olması takdirde işlem dögüsüne devam ediyoruz. Format hatalı ise hata kodunu “format” olarak yazdırıyoruz.

Format kısmında hata yoksa gönderilen fotoğrafımızın uzantı öncesi adını seo ile geçersiz karakterlerden arındırarak kendi formatı ile takrar birleştiriyoruz.

Daha sonra yüklenen fotoğrafların aynı dosya olması durumunda, karışıklık olmaması için date güncel tarih ve saat bilgisini fotoğraf adının başına ekleyerek, önceden belirttiğimiz dosya yoluna tarayıcımız tarafından temp klasöründe bekletilen aynı fotoğrafımızı ekliyoruz.

Bu işlemi de move_uploaded_file() ile gerçekleştiriyoruz.

İşlemin tamamlanması durumunda sonuç olarak “ok” yazdırıyoruz.