Jquery Ajax ile PHP Çoklu/Tek Resim Yükleme

Blog(CMS) sistemlerinde veya forum sistemlerinde yönetim paneli üzerinden ya da kullanıcıların içerik oluşturduğu, resim yüklediği ve paylaştığı alanlarda post işlemlerini jQuery ile yapıyorsak ve resim yüklememiz gerekiyor ise jQuery normal post işlemi yerine Ajax kullanmamız gerekiyor.

Ajax üzerinde post gönderebilmek için eğer html üzerinde form kullanmıyorsak FormData oluşturmamız gerek örnek olarak:

var post_data_obir = new FormData();

Form data oluşturduktan sonra form içerisine veri eklemek için append kullanacağız örnek olarak:

post_data_obir.append("deneme", "deneme verisi");

HTML üzerinde resim alacağımız input’a bir id vereceğiz ve jquery ile o id üzerindeki input üzerinden veri alacağız örnek olarak:

<input type="file" id="resim" accept=".jpg, .png, .jpeg">

jQuery ile bu input üzerindeki seçilen dosyanın bilgilerini id üzerinden alacağız örnek olarak:

var resim_dosya_adi_obir = $("#resim")[0].files[0].name;
alert("Seçilen dosya adı"+resim_dosya_adi_obir);

$(“#resim”) id olarak seçtik ve [0] array ile ilk input olduğunu belirttik 1 dosyayı kontrol edeceğimiz için files[0] diyerek array üzerinden ilk seçilen dosyayı ele aldık ve name ile dosya adına eriştik.

Peki bu input üzerindeki dosyayı form’a append ile nasıl ekleyeceğiz? Örnek olarak:

var resim_dosya = $("#resim")[0].files[0];
post_data_obir.append("resim", resim_dosya);

Yukarıdaki işlemde seçilen dosyayı belirttik ve append ile jQuery üzerinde oluşturduğumuz form’a ekledik.

Oluşturduğumuz form Ajax ile nasıl gönderilecek örnek bir kod ile:

// Form oluşturup resim id'li inputun içerisinden seçilen dosyayı form'a ekledik.
var post_data_obir = new FormData();
var resim_dosya = $("#resim")[0].files[0];
post_data_obir.append("resim", resim_dosya);

// Ajax ile dosyamıza oluşturduğumuz form'u gönderelim ve alert ile dosyadan gelen çıktıyı alalım
$.ajax(
        {
          url:'resim_yukle.php',
          method:'POST',
          data:post_data_obir,
          contentType:false,
          cache:false,
          processData:false,
            success: function (cikti)
                    {
                   alert(cikti);
                    },
        }
       );

Şimdi javascript üzerindeki işlemlerimiz bitti. PHP ile form üzerinden gelen dosyayı kontrol edip yazdıracağız şu şekilde:

<?php
// array ile izin vereceğimiz dosya türlerini belirleyelim 
$turler = array("png", "jpg", "jpeg");

// $_FILES üzerinden resim olarak adlandırdığımız form üzerinden gelen dosyanın bilgilerini alalım.
$dosya_adi_obir = $_FILES["resim"]["name"];
$dosya_tmp_adi_obir = $_FILES["resim"]["tmp_name"];

// pathinfo fonksiyonu ile 2. parametreye PATHINFO_EXTENSION ekleyerek dosyanın gerçek uzantısını bulalım
$dosya_uzantisi_obir = pathinfo($dosya_adi_obir, PATHINFO_EXTENSION);

// dosya uzantısı array içerisinde olan herhangi bir uzantıya eşitse işlem yapalım
if(in_array($dosya_uzantisi_obir, $turler)) {
// eşit olduğu için dosyamızı kaydedelim
move_uploaded_file($dosya_tmp_adi_obir, $dosya_adi_obir);
  
echo 'Resim kayıt edildi. Resim uzantısı:'.$dosya_adi_obir;
}
?>

Yukarıdaki PHP kod üzerinde gelen dosyanın türlerini belirledik yani resim türleri olarak kontrol edilmesini belirttik. Resim türlerinden biri ise işleme al diyerek dosyamızı kaydettik ve çıktı olarak uzantıyı verdik.

Çoklu yüklemek istersek ne yapacağız?

Javascript üzerinde çoklu yüklemek istersek gelen dosyaları for döngüsü ile array içerisine alıp php’ye göndereceğiz. Input örneği olarak:

<input type="file" id="resimler" accept=".jpg, .png, .jpeg" multiple>

Resimler id’li inputumuza multiple belirterek birden fazla dosya seçebilmesini sağladık.

Çoklu seçilen dosyaları nasıl javascript üzerinden form’a ekleyeceğiz örnek olarak göstereyim:

// Resimler array oluşturalım.
var resimler = [];

// Length ile eklenen toplam resimleri alalım
var resimler_toplam = $("#resimler")[0].files.length;

// Form oluşturalım
var resimler_data_obir = new FormData();

// For döngüsü ile ne kadar resim varsa o kadar işlem yap diyerek tüm resimleri form'a array olarak ekliyoruz.
for(i=0; i<resimler_toplam; i++) {
resimler_data_obir.append("resimler[]", $("#resimler")[0].files[i]);
}

// Ajax ile array içerisine eklediğimiz tüm resimleri gönderelim ve çıktıyı document.write ile alalım.
$.ajax(
        {
          url:'coklu_resim_yukle.php',
          method:'POST',
          data:resimler_data_obir,
          contentType:false,
          cache:false,
          processData:false,
            success: function (cikti)
                    {
                   document.write(cikti);
                    },
        }
       );

Şimdi javascript üzerindeki işlemlerimiz bitti. PHP ile form üzerinden gelen dosyaları kontrol edip yazdıracağız şu şekilde:

<?php
// array ile izin vereceğimiz dosya türlerini belirleyelim 
$turler = array("png", "jpg", "jpeg");

// count fonksiyonu ile ne kadar dosya geldiyse o kadar işlem yap diyerek for döngüsü başlatıyoruz.
for($i=0; $i<count($_FILES["resimler"]); $i++) {

// $_FILES üzerinden resimler olarak adlandırdığımız form üzerinden gelen dosyaların bilgilerini alalım.
$dosya_adi_obir = $_FILES["resimler"]["name"][$i];
$dosya_tmp_adi_obir = $_FILES["resimler"]["tmp_name"][$i];

// pathinfo fonksiyonu ile 2. parametreye PATHINFO_EXTENSION ekleyerek dosyanın gerçek uzantısını bulalım
$dosya_uzantisi_obir = pathinfo($dosya_adi_obir, PATHINFO_EXTENSION);

// dosya uzantısı array içerisinde olan herhangi bir uzantıya eşitse işlem yapalım
if(in_array($dosya_uzantisi_obir, $turler)) {
// eşit olduğu için dosyamızı kaydedelim
move_uploaded_file($dosya_tmp_adi_obir, $dosya_adi_obir);
  
echo 'Resim kayıt edildi. Resim uzantısı:'.$dosya_adi_obir.'<br>';
}
?>

Yukarıdaki PHP kod üzerinde dosyaların türlerini belirledik. For döngüsüne resimler adı ile gelen dosyalar ne kadarsa o kadar işlem yap diyerek tüm dosyaların dosya türünü kontrol edip eğer izin verdiğimiz dosya türü ise yazdır dedik ve kaydettik.

Daha iyi anlayıp kendi sistemlerinize entegre edebilmeniz için proje olarak ekledim.

Proje olarak indirin : https://github.com/obirninja-lab/obirninja-lab.github.io/raw/main/uploads/obirninja-resim-yukleme.zip

Daha fazla bu tarz güncel konulara erişmek için bildirimleri açıp obir.ninja’yı takip etmeyi unutmayın.

Bir Cevap Yazın