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.