JQuery Kullanarak File Upload İşlemi
Hepinize merhaba dostlarım 😊. Yine hepimiz için yoğun geçen bir haftanın ardından gelen pazar gününün artık yeni bir konu öğrenmemiz için özel bir güne çevirdiğimi kabul ettiğinizi biliyorum 😅. Normalde bu gün bir önceki yazım olan "Javascript Chaining Method Kullanımı" (okumayan dostlarım için link burada) konusunun devamı niteliğinde setFoo ve setBar anlatacaktım. Lakin hafta içerisidneki iş yoğunluğu, MFSoftware Blog sitesinin çökme durumu bu durumu biraz kötü etkiledi dostlarım 😌. Her neyse yılmak veya pes etmek yok bilişim dünyasında konu kıtlığı neredeyse hiç yok 😉.
Yine çenem düştüğünün farkındayım kusuruma bakmayım 😃 Sizlerin değerli vaktini çalmak benim haddime değil. O halde bugün işleyeceğimiz konumuza gelecek olursak sizlere Javascript üzerinde JQuery Kullanarak Dosya Yükleme işleminden bahsedeceğim.
Eveeeet dostlarım 😊. Proje geliştirme süre.lerinde bazen sayfa yenilenmeden işlemler yapacağımız durumlar gelebilir. Ya veri gönderme işlemi yapabiliriz, ya renderPage ile hızlı bir filtreleme yapabiliriz, ya da bu yazımda da değindiğimiz konuyu yani dosya yükleme işlemini yapabiliriz. İçinizden geçen sözleri duyuyorum
Hocam hadi hızlıca işleyelim konuyu aşırı merak ediyoruz 😅
O halde dostlarım sözümü daha fazla uzatmadan hemen konumuza geçişimizi yapıyorum. Öncelikle bir index.php dosyası hazırlayalım. Daha sonra içerisine
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script> <!-- JQUERY KULLANABİLMEK İÇİN KÜTÜPHANEYİ DAHİL ETTİK-->
<title>Jquery İle Dosya Yükleme | MFSoftware Blog</title>
</head>
<body>
<form action="islem.php" method="POST" enctype="multipart/form-data" id="mfBlogForm">
<label for="">Resim Dosyası Seçiniz</label>
<br>
<input type="file" name="file">
<br>
<button style="margin-top: 15px !important;" type="submit">Dosya Gönder</button>
</form>
<script src="my.js"></script> <!-- JAVASCRIPT DOSYAMIZI DAHİL EDELİM -->
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Buna ek olarak da bir my.js dosyası oluşturalım. Orada da dosyamızı diğer sayfamıza aktarmak için bir kod yazalım
$(document).ready(function () {
$("#mfBlogForm").on("submit",function (e) {
e.preventDefault();
$.ajax({
url : "islem.php",
type : "POST",
data : new FormData(this),
contentType : false,
processData : false,
success : function (e){
alert(e);
}
});
});
});şeklinde javascript kodlarını da yazdık dostlarım. Şimdi bu kısım sizlere biraz karmaşık gelmiş olabilir. Hemen anlatıyorum dostlarım 😊.
Öncelikle biz bu kısımda resim yükleme formumuza tanımladığımız myBlogForm id si (yani belirtilen form üzerinde) submit olayı gerçekleşmiş ise bu fonksiyon çalışsın dedik. Daha sonrasında formumuzun hiçbir yere yönlenmemesi için e.preventDefault() kodunu yazdık. Bu işlemlerin ardında çalışacak olan JQuery kodlarını yazdık. Hemen bunları da inceleyelim ne işe yarıyor
| url | Ajax üzerinden hangii sayfaya request atcağımızı belirtiyoruz |
| type | İsteğimizin hangi tipte gönderilmesini istiyorsak onu yazıyoruz |
| data | Göndereceğimiz form datalarını bu nesne içerisinde gönderiyoruz |
| contentType | Göndereceğimiz verilerin hangi tipte (Json mu Yoksa HTML formatında mı) şeklinde gönderilme işlemini ayarlıyoruz. Biz bu işlemde false dedik |
| processData | Göndereceğimiz verinin bir query string olarak gönderilip gönderilmeyeceğini burada ayarlıyoruz. Bu işlemde bu kısma da false dedik |
| success | Form gönderilme işlemi başarılı ise çalışacak olan methodu ayarladık |
şeklinde dostlarım. Kodlarımızın genel görevleri bunlar 😊. Şimdi ise gelelim resim yükleme işlemi için oluşturduğumuz islem.php dosyamızın içeriğine
<?php
$file_kaynak = $_FILES['file']['tmp_name']; // DOSYA KAYNAK YOLUNU ALALIM
$file_yol = "uploads/".$_FILES['file']['name']; // DOSYA KAYDEDİLECEK HEDEFİ ALALIM
if (move_uploaded_file($file_kaynak,$file_yol)){ // DOSYA YÜKLEME İŞLEMİ BAŞARILI İSE
echo "Başarılı";
}else{ // DOSYA YUKLEME İŞLEMİ BAŞARISIZ İSE
echo "Başarısız";
}şeklinde kodlarımızı yazdık dostlarım. Artık index.php kısmını local sunucumuzda başlatıp herhangi bir dosyayı gönül rahatlığı ile yükleme işlemini gerçekleştirebiliriz.
Eveeeet dostlarım 😊. Bu yazımda sizlere JQuery kütüphanesini kullanarak resim yükleme işleminden elimden geldiğince, dilim döndüğünce anlatmaya çalıştım. Umarım faydalı olmuşumdur. Eksik veya hatalı bir anlatım yapmış isem benimle iletişime geçmekten çekinmeyin. Konu başlarda biraz karmaşık veya zor gelebilir dostlarım anlıyorum. Bu süreçte sizlerden yapmanızı istediğim tek şey "İstikrarlı ve Azimli Olmanız, Bolca Pratik Yapmanız" olacaktır. Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır 😊.
Bu arada sitemde yaşanan ufak çöküş sonrasında Projeler kısmını kaldırdım dostlarım. Proje içerisindeki kodları bir süreliğine telegram adresimden (@mfsoftware) bana ulaşırsanız sizlere iletebilirim 😊
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer