Web uygulamalarında dosya yükleme işlemleri, kullanıcı deneyimini geliştiren önemli özelliklerden biridir. Geleneksel form tabanlı dosya yükleme yerine, AJAX kullanarak sayfa yenilemeden dosya yükleme yapmak hem daha hızlı hem de kullanıcı dostu bir yaklaşımdır. Bu yazıda, AJAX ile dosya yükleme ve PHP ile sunucu tarafında dosya kaydını güvenli bir şekilde yapmayı ele alacağız.
1. HTML ve JavaScript ile AJAX Dosya Yükleme
HTML tarafında bir dosya seçme butonu ve AJAX yöntemiyle dosyayı sunucuya gönderen bir JavaScript fonksiyonu bulunuyor.
Kod: HTML ve JavaScript
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX ile Dosya Yükleme</title>
</head>
<body>
<h2>AJAX ile Dosya Yükleme</h2>
<input type="file" id="file">
<button onclick="uploadFile()">Yükle</button>
<p id="result"></p>
<script>
function uploadFile() {
let fileInput = document.getElementById("file");
let file = fileInput.files[0];
if (!file) {
alert("Lütfen bir dosya seçin!");
return;
}
let formData = new FormData();
formData.append("file", file);
let xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onload = function () {
if (xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
if (response.status) {
document.getElementById("result").innerHTML =
"Dosya başarıyla yüklendi: <a href='uploads/" + response.fileName + "' target='_blank'>" + response.fileName + "</a>";
} else {
document.getElementById("result").innerHTML = "Hata: " + response.message;
}
} else {
document.getElementById("result").innerHTML = "Sunucu hatası!";
}
};
xhr.send(formData);
}
</script>
</body>
</html>
2. PHP ile Sunucu Tarafında Dosya Yükleme
PHP tarafında dosyanın güvenli bir şekilde kaydedilmesi, izin verilen dosya türleri ve boyutların kontrol edilmesi ve yüklenmiş resimlerin boyutunun optimize edilmesi gibi işlemler gerçekleştiriliyor.
Kod: PHP Dosya Yükleme (upload.php)
<?php
header("Content-Type: application/json");
// Yanıt için JSON oluştur
$response = ["status" => false, "fileName" => "", "message" => ""];
function makeFileNameSafe($fileName) {
return preg_replace('/[<>:"\/\\|?*]/', '', str_replace(' ', '-', $fileName));
}
function generateUniqueFileName($uploadPath, $fileName) {
$fileExtension = pathinfo($fileName, PATHINFO_EXTENSION);
$baseFileName = pathinfo($fileName, PATHINFO_FILENAME);
$uniqueFileName = $baseFileName . '_' . time() . '.' . $fileExtension;
while (file_exists($uploadPath . '/' . $uniqueFileName)) {
$uniqueFileName = $baseFileName . '_' . time() . rand(1000, 9999) . '.' . $fileExtension;
}
return $uniqueFileName;
}
function resizeImage($filePath, $maxWidth = 800, $maxHeight = 800) {
list($origWidth, $origHeight, $imageType) = getimagesize($filePath);
if ($origWidth <= $maxWidth && $origHeight <= $maxHeight) {
return;
}
$ratio = min($maxWidth / $origWidth, $maxHeight / $origHeight);
$newWidth = $origWidth * $ratio;
$newHeight = $origHeight * $ratio;
switch ($imageType) {
case IMAGETYPE_JPEG:
$image = imagecreatefromjpeg($filePath);
break;
case IMAGETYPE_PNG:
$image = imagecreatefrompng($filePath);
break;
case IMAGETYPE_WEBP:
$image = imagecreatefromwebp($filePath);
break;
default:
return;
}
$resizedImage = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($resizedImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $origWidth, $origHeight);
switch ($imageType) {
case IMAGETYPE_JPEG:
imagejpeg($resizedImage, $filePath, 90);
break;
case IMAGETYPE_PNG:
imagepng($resizedImage, $filePath, 9);
break;
case IMAGETYPE_WEBP:
imagewebp($resizedImage, $filePath, 90);
break;
}
imagedestroy($image);
imagedestroy($resizedImage);
}
$uploadPath = 'uploads/';
$maxFileSize = 5 * 1024 * 1024;
$allowedTypes = [
'image/jpeg', 'image/png', 'image/webp', 'application/pdf',
'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'image/svg+xml', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet'
];
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
$file = $_FILES['file'];
if ($file['error'] !== UPLOAD_ERR_OK) {
$response["message"] = "Dosya yükleme hatası!";
echo json_encode($response);
exit;
}
if (!in_array($file['type'], $allowedTypes)) {
$response["message"] = "Geçersiz dosya türü!";
echo json_encode($response);
exit;
}
if ($file['size'] > $maxFileSize) {
$response["message"] = "Dosya boyutu 5MB’ı geçemez!";
echo json_encode($response);
exit;
}
$safeFileName = makeFileNameSafe($file['name']);
$uniqueFileName = generateUniqueFileName($uploadPath, $safeFileName);
$filePath = $uploadPath . $uniqueFileName;
if (move_uploaded_file($file['tmp_name'], $filePath)) {
if (strpos($file['type'], 'image') === 0) {
resizeImage($filePath);
}
$response["status"] = true;
$response["fileName"] = $uniqueFileName;
} else {
$response["message"] = "Dosya yüklenirken hata oluştu!";
}
} else {
$response["message"] = "Geçersiz istek!";
}
echo json_encode($response);
Sonuç
Bu sistem sayesinde, AJAX kullanarak sayfa yenilemeden dosya yükleme yapabilir, PHP ile dosya yükleme güvenliğini sağlayabilir ve görsel işlemlerinde otomatik boyut düzenlemesi yapabilirsiniz. Gelişmiş web uygulamalarında benzer yöntemler kullanarak dosya yükleme iş akışını optimize edebilirsiniz. 🚀
