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

<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.