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.
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.
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...
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 :)
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...
PHP ile Sabit Veri oluşturup onu projenizin heryerinde kullanabilirsiniz.
Detaylı GörüntüleOrganik Sebzelerim Olmaya Başladı için Temel Coşkun dediki, Bereketli olsun bana da tadına bakmak nasip olur inşallah
UsluTV V2 Canlı TV Scripti için OSHAN SABIRLI dediki, Merhaba TV İzleme scripti ile ilgileniyorum. Bilgi verirseniz sevinirim.
Online Test Sınav Yazılımı için volkan dediki, merhabalar hocam volkan ben bu test çözme scriptinin fiyatı nedir öğrenebilir miyiz...benim bi iki ...
PHP ve Ajax Kullanarak Otomatik Resim Upload Sayfası Nasıl Oluşturulur? için erkan dediki, kodları denedim gayet başarılı çalışıyor. js veya diğer koddaki yolları verirken gerekli ayarları y...
Burada Yer Almak ister misin ? İletişim sayfasından bana ulaşabilirsin :)
UsluTV V2 Canlı TV Scripti için Kazım USLU dediki, Devam eden satışımız bulunmamakta maalesef.