Merhaba Arkadaşlar, Php & Ajax ile Dosya yükleme upload işlemlerinin nasıl yapıldığını anlatmak istiyorum. Basit ve kolay kullanımlı ama ileri seviyede geliştirilebilir. Ekstra sormak istediklerinizi yorum bölümünden bana iletebilirsiniz.
Görünüm açasından güzel olması adına Bootstrap kütüphanesini kullandım bunu kullanmak zorunda değilsiniz. Sadece JQuery kütüphanesini dahil etmeniz yeterli olacaktır.
Öncelikle localhost’unuzda dizin oluşturun (örn: ajax-upload) içine ekleyeceğiniz örnek dosyaları aşağıda listeliyorum.
Aşağıdaki listede bir de boş upload dizini göreceksiniz. Burası dosyalarımızın yükleneceği dizin localhost dışında uzak sunucuda bunu çalıştıracaksanız. upload klasörünün dosya izinlerini mutlaka Chmod 707 yapınız.
- ajax-upload/index.html
- ajax-upload/upload.php
- ajax-upload/.htaccess
- ajax-upload/assets/custom.js
- ajax-upload/upload/
index.html dosya içeriğimiz.
<!doctype html> <html lang="tr"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <title>Php & Ajax Upload</title> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12"> <h1>Php & Ajax Upload</h1> <form id="uploadForm" enctype="multipart/form-data"> <div class="form-group"> <label for="file">Yüklenecek Dosya</label> <input type="file" class="form-control" name="file" id="file" required /> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Upload</button> </div> </form> <div id="result"></div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="assets/custom.js"></script> </body> </html>
assets/custom.js dosya içeriğimiz.
$('#uploadForm').on('submit',function(e){
e.preventDefault();
$.ajax({
url: 'upload.php', // Verileri Post Ettiğimiz dosya adı
type: 'POST', // Form Metodumuz
data: new FormData(this), // Form ile gelen verilerimiz
contentType: false,
processData: false,
beforeSend: function(){
// Form Post edildikten sonra yapılacak işlem
$('#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){
// upload.php dosyamıza verilerin gönderildikten sonra işlem başarılı ise upload.php ile gelen sonuç değerini yazdıracağımız satır
$('#result').html(data);
$('#uploadForm')[0].reset(); // İşlem başarılı olduktan sonra formu sıfırlar
}
});
});
upload.php dosya içeriğimiz.
<?php
if($_FILES){
/* Dosya Adını Düzeltme Fonksiyonu */
// Yüklenen dosya adındaki türkçe karakterleri değiştirir
function renamefile($filename) {
$find = array('Ç', 'Ş', 'Ğ', 'Ü', 'İ', 'Ö', 'ç', 'ş', 'ğ', 'ü', 'ö', 'ı', '-');
$replace = array('c', 's', 'g', 'u', 'i', 'o', 'c', 's', 'g', 'u', 'o', 'i', ' ');
$filename = strtolower(str_replace($find, $replace, $filename)); // str_replace() ile türkçe karakterleri değiştiriyoruz. strtolower() ile büyük harfleri küçük harfe dönüştürüyoruz.
$filename = str_replace(' ', '-', $filename); // str_replace() fonksiyonu ile boşlukları - yapıyoruz.
return $filename;
}
/* Dosya Adını Düzeltme Fonksiyonu */
$uploadfolder = 'upload'; // Dosyanın yükleneceği klasörü yolunu yazıyoruz.
$file = $_FILES['file']; // $_FILES ile gelen verileri değişkene atıyoruz.
// $formats = array("application/pdf", "application/doc", "application/docx", "application/xls", "application/xlsx"); // Dokümanlar için PDF, Word, Excel formatları
$formats = array("image/pjpeg", "image/jpeg", "image/gif", "image/bmp", "image/x-png", "image/png"); // Resimler için Jpg, Gif, Bmp, Png formatları
// $formats = array("video/mp4", "video/mpg", "video/mpeg", "video/mov", "video/avi", "video/flv", "video/wmv"); // Videolar için Mp4, Mpg, Mov, Avi, Flv, Wmv formatları
$url_decode = urldecode($file['name']);
$name = explode('/', $url_decode);
$rand = time(); // Random bir değer atamak için burada zamanı alıyoruz.
if (in_array($file['type'], $formats)) {
// Yüklemek istenilen dosyanın izin verilen dosya formatlarına uygunluğunu kontrol ediyoruz.
$upload_file = $uploadfolder.'/'.$rand.renamefile($name[count($name) - 1]);
move_uploaded_file($file['tmp_name'], $upload_file);
$filename = $rand.renamefile($name[count($name) - 1]);
echo '<div class="alert alert-success text-center"><strong>İşlem Başarılı.!</strong> Dosya başarıyla yüklendi.<br><br><a href="'.$uploadfolder.'/'.$filename.'" class="btn btn-success btn-xs" target="_blank">Dosyayı Görüntüle</a></div>'; // İşlem başarılı ise sonucu ekrana yazdırıyoruz.
}else{
echo '<div class="alert alert-danger"><strong>Hata.!</strong> Bir hata oluştu lütfen web yöneticinize başvurunuz. Yanlış Dosya Formatı veya boyut sınırı aşıyor.</div>'; // Eğer dosya formatı izin verdiğimiz formatlara uygun değilse hata mesajını ekrana yazdırıyoruz.
}
}
?>
upload.php dosyanız ile ilgili önemli bir uyarıda bulunmak istiyorum.
$formats dizimiz var. Hepsinin ne amaçla olduğunu sırasıyla yorum satırlarında belirttim. Ama yine de anlatmak istiyorum. Kullanacağınız dosya formatını // kaldırıp kullanmayacağınızı // ekleyip disable edebilirsiniz.
.htaccess dosya içeriğimiz.
php_value upload_max_filesize 1000M php_value post_max_size 1000M
Bu nokta biraz daha yüksek boyutlu dosyaları sunucuya yüklemek isteyenler için geçerli. Genellikle php.ini dosyanızda bunu değiştirmenizi söylenir. Ve default olarak 2m ve 16m olarak geliyor. Sunucu yöneticisine ulaşıp rica edip “bunu benim için yükseltebilir misiniz?” dediğinizde her zaman olumlu sonuçlar alamayabilirsiniz. Bu işide kimseye bağlı kalmadan .htaccess yardımı ile çözümleyebiliyoruz. Video Müzik v.b dosya boyutu büyük işler yapacaksınız bu .htaccess dosyanıza eklemeniz gerekmektedir. Dosya boyutu büyük upload işlemleri olmayacaksa default ayarlar ile gelen sınırlama sizler için yeterli olacaktır. Böylece .htaccess dosyanıza bu satırları eklemenize gerek yoktur.
Umarım sizlere yardımcı olabilmişimdir.
Sorularınızı yorum yazarak iletebilirsiniz.
Demo ve Örnek dosyaları aşağıdaki linklerden görebilirsiniz.
Görüşmek üzere,
3 Yorum
Çalışmadı abicim isleme Gidiyor Dosyanın Adı orda gözükmüyor
dosya yazma izinlerinizi kontrol ettiniz mi ? Yazdığınızı paylaşırsanız size yardımcı olmaya çalışırım.
Teşekkürler Kardeşim….
Bu yazı yorumlara kapalı, ama geri izlemeler ve pingback'ler açık.