PHP ve Ajax Kullanarak Otomatik Resim Upload Sayfası Nasıl Oluşturulur?

PHP Kodlama 18 Şubat 2021 - 09:52:26 582 Gösterim 3 Yorum

Php ve Ajax kullanarak sayfa yenilemeden bir resmi nasıl sunucuya yükleyebiliriz? Yüklediğimiz resmin adresini nasıl alabiliriz? veya yüklemeden sonra ilgili resmi sunucudan nasıl silebiliriz? sorularına karşılık böyle bir içeriği oluşturmak istedim. Tüm bu işlemleri yapmak için JQuery ve PHP kullanacağız. Öncelikle formumuzu oluşturalım ve yüklenen resmin gözükeceği div ve silme işlemini yapacağımız alt formu oluşturalım.

<!--Yükleme Formu-->
<form id="uploadForm" enctype="multipart/form-data">
<div class="form-group">
<input type="file" class="form-control" name="file" id="file" required />
</div>
<div class="form-group">
<button type="submit" class="btn btn-secondary">Yükle</button>
</div>
</form>
<!--Görüntüleme ve Silme Formu-->
<form id="sil" enctype="multipart/form-data">
<div id="result"></div>
</form>

Tüm işlemler burada sayfa değişmeden gerçekleşecek. Bunun için Jquery kütüphanesini eklememiz gerekiyor. Ben Bootstrap kullandığım için formdaki classlar bootstrap kütüphanesinin (form-group, form-control) uzantılarıdır.

JQuery kütüphanesini sayfamıza dahil edelim.

<script src="'vendors/jquery/dist/jquery.min.js'"></script>

Sizde dosya yolu neredeyse orayı girin ya da CDN kullanın. Daha sonra Ajax kodumuzu girelim.

<script>
$('#uploadForm').on('submit',function(e){
	e.preventDefault();
	$.ajax({
		url: '/upload.php', 
		type: 'POST', 
		data: new FormData(this), 
		contentType: false,
		processData: false,
		beforeSend: function(){
			
			$('#result').html('<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%;"><span class="sr-only">Lütfen Bekleyiniz....</span></div></div>');
		},
		success: function(data){
			$('#result').html(data);
			$('#uploadForm')[0].reset();
		}
	});
});
</script>

Burada upload.php isminde bir dosyaya uploadForm idsine ait formdaki verileri aktardık ve upload.php de gelen sonucu result idsine ait divin içine ekleyip, uploadForm idli formumuzu sıfırladık. Bu ajax kodlarını jquery kütüphanesinin altına eklemelemisiniz. Aksi halde kütüphaneye ulaşamaz ve çalışmaz. Şimdi upload.php dosyasına geçelim.

<?php
if($_FILES){
        function renamefile($dosyaismi) {
            $bul = array('Ç', 'Ş', 'Ğ', 'Ü', 'İ', 'Ö', 'ç', 'ş', 'ğ', 'ü', 'ö', 'ı', '-');
            $degistir = array('c', 's', 'g', 'u', 'i', 'o', 'c', 's', 'g', 'u', 'o', 'i', ' ');
            $dosyaismi = strtolower(str_replace($bul, $degistir, $dosyaismi));
            $dosyaismi = str_replace(' ', '-', $dosyaismi); 
            return $dosyaismi;
        }
    $uploadfolder = '/resimler';
    $file = $_FILES['file'];
    $formats = array("image/pjpeg", "image/jpeg", "image/gif", "image/bmp", "image/x-png", "image/png");
    $url_decode = urldecode($file['name']);
    $name = explode('/', $url_decode);
    $rand = time();
    if (in_array($file['type'], $formats)) {
        $upload_file = $uploadfolder.'/'.$rand.'-'.renamefile($name[count($name) - 1]);
        move_uploaded_file($file['tmp_name'], $upload_file);
        $filename = $rand.'-'.renamefile($name[count($name) - 1]);
?>

<img src="/resimler/<?=$filename?>" width="100%" alt="">
<input id="resimyol" class="form-control" type="text" name="" value="/resimler/<?=$filename?>" autofocus="autofocus" onfocus="this.select()">
<input type="hidden" name="yol" value="/resimler/<?=$filename?>">
<input type="hidden" name="deleteimage" value="1">
<button type="submit" class="btn btn-danger">Sil</button>
        
<?php

     }else{
        echo '<div class="alert alert-danger"><strong>Hata.!</strong></div>';
    }
}


if($_POST['deleteimage']):

    @unlink($_POST['yol']);

    echo 'silindi';
endif;

?>

Burada ilk tarafta dosyayı sunucuya ekledik ve result alanında gözükmesi için aşağıdaki formu dönüşe bastık.

<img src="/resimler/<?=$filename?>" width="100%" alt="">
<input id="resimyol" class="form-control" type="text" name="" value="/resimler/<?=$filename?>" autofocus="autofocus" onfocus="this.select()">
<input type="hidden" name="yol" value="/resimler/<?=$filename?>">
<input type="hidden" name="deleteimage" value="1">
<button type="submit" class="btn btn-danger">Sil</button>

Bu formda yüklenen resmi gösterecek, altında resmin adresini gösteren bir input olacak ve inputa tıkladığınızda otomatik olarak içerisindeki değeri seçecek. Ayrıca alt kısımda birde silme butonu olacak. Sile bastığınızda upload.php dosyamızdaki;

if($_POST['deleteimage']):

    @unlink($_POST['yol']);

    echo 'silindi';
endif;

 bu kısım çalışacak ve ilgili resimi silecek. Tüm işlemlerimiz bu kadar.

3 Yorum

erkan
07 Ağustos 2021 - 17:35:54

kodları denedim gayet başarılı çalışıyor. js veya diğer koddaki yolları verirken gerekli ayarları yaparsanız net bir şekilde çallışıyor teşekkürler. bazen upload yolunun tam verilmesi gerekebiliyor "var/www/*****/html/resimler" gibi mesela.


Kazım USLU
24 Temmuz 2021 - 14:59:26

Selam, Denedim ama çalışmadı. Ne resim bastı, ne resim yükledi, yüklemiş gibi görünüyor ama ortada resim yok. Ne foldur a yükleme yapıyor, ne mysql e...

25 Haziran 2021 - 16:19:38 Hasan

Burada zaten mysql a dahil etmediğimizi CRUD içermediğinden anlayabilirsin hocam. Ayrıca yazıyı okuyarak denersen klasör yollarının doğru olduğuna emin olursan çalışmaması için hiç bir neden yok :)


Hasan
25 Haziran 2021 - 16:19:38

Selam, Denedim ama çalışmadı. Ne resim bastı, ne resim yükledi, yüklemiş gibi görünüyor ama ortada resim yok. Ne foldur a yükleme yapıyor, ne mysql e...


Yorum Yapın