{"id":261,"date":"2025-05-11T12:35:46","date_gmt":"2025-05-11T09:35:46","guid":{"rendered":"https:\/\/www.webmobkey.com\/blog\/?p=261"},"modified":"2026-01-28T08:22:11","modified_gmt":"2026-01-28T08:22:11","slug":"ajax-ile-dosya-yukleme-ve-php-ile-sunucu-tarafinda-guvenli-kayit","status":"publish","type":"post","link":"https:\/\/www.webmobdesign.com\/blog\/tr\/ajax-ile-dosya-yukleme-ve-php-ile-sunucu-tarafinda-guvenli-kayit\/","title":{"rendered":"AJAX ile Dosya Y\u00fckleme ve PHP ile Sunucu Taraf\u0131nda G\u00fcvenli Kay\u0131t"},"content":{"rendered":"\n

Web uygulamalar\u0131nda dosya y\u00fckleme i\u015flemleri, kullan\u0131c\u0131 deneyimini geli\u015ftiren \u00f6nemli \u00f6zelliklerden biridir. Geleneksel form tabanl\u0131 dosya y\u00fckleme yerine, AJAX kullanarak sayfa yenilemeden dosya y\u00fckleme yapmak hem daha h\u0131zl\u0131 hem de kullan\u0131c\u0131 dostu bir yakla\u015f\u0131md\u0131r. Bu yaz\u0131da, AJAX ile dosya y\u00fckleme<\/strong> ve PHP ile sunucu taraf\u0131nda dosya kayd\u0131n\u0131 g\u00fcvenli bir \u015fekilde yapmay\u0131<\/strong> ele alaca\u011f\u0131z.<\/p>\n\n\n\n

1. HTML ve JavaScript ile AJAX Dosya Y\u00fckleme<\/h4>\n\n\n\n

HTML taraf\u0131nda bir dosya se\u00e7me butonu ve AJAX y\u00f6ntemiyle dosyay\u0131 sunucuya g\u00f6nderen bir JavaScript fonksiyonu bulunuyor.<\/p>\n\n\n\n

Kod: HTML ve JavaScript<\/h4>\n\n\n
\n<!DOCTYPE html>\n<html lang="tr">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>AJAX ile Dosya Y\u00fckleme<\/title>\n<\/head>\n<body>\n    <h2>AJAX ile Dosya Y\u00fckleme<\/h2>\n    <input type="file" id="file">\n    <button onclick="uploadFile()">Y\u00fckle<\/button>\n    <p id="result"><\/p>\n    <script>\n        function uploadFile() {\n            let fileInput = document.getElementById("file");\n            let file = fileInput.files[0];\n\n            if (!file) {\n                alert("L\u00fctfen bir dosya se\u00e7in!");\n                return;\n            }\n\n            let formData = new FormData();\n            formData.append("file", file);\n\n            let xhr = new XMLHttpRequest();\n            xhr.open("POST", "upload.php", true);\n\n            xhr.onload = function () {\n                if (xhr.status === 200) {\n                    let response = JSON.parse(xhr.responseText);\n                    if (response.status) {\n                        document.getElementById("result").innerHTML = \n                            "Dosya ba\u015far\u0131yla y\u00fcklendi: <a href='uploads\/" + response.fileName + "' target='_blank'>" + response.fileName + "<\/a>";\n                    } else {\n                        document.getElementById("result").innerHTML = "Hata: " + response.message;\n                    }\n                } else {\n                    document.getElementById("result").innerHTML = "Sunucu hatas\u0131!";\n                }\n            };\n\n            xhr.send(formData);\n        }\n    <\/script>\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
2. PHP ile Sunucu Taraf\u0131nda Dosya Y\u00fckleme<\/h4>\n\n\n\n
PHP taraf\u0131nda dosyan\u0131n g\u00fcvenli bir \u015fekilde kaydedilmesi<\/strong>, izin verilen dosya t\u00fcrleri ve boyutlar\u0131n kontrol edilmesi<\/strong> ve y\u00fcklenmi\u015f resimlerin boyutunun optimize edilmesi<\/strong> gibi i\u015flemler ger\u00e7ekle\u015ftiriliyor.<\/p>\n\n\n\n
Kod: PHP Dosya Y\u00fckleme (upload.php)<\/h4>\n\n\n
\n<?php\nheader("Content-Type: application\/json");\n\n\/\/ Yan\u0131t i\u00e7in JSON olu\u015ftur\n$response = ["status" => false, "fileName" => "", "message" => ""];\n\nfunction makeFileNameSafe($fileName) {\n    return preg_replace('\/[<>:"\\\/\\\\|?*]\/', '', str_replace(' ', '-', $fileName));\n}\n\nfunction generateUniqueFileName($uploadPath, $fileName) {\n    $fileExtension = pathinfo($fileName, PATHINFO_EXTENSION);\n    $baseFileName = pathinfo($fileName, PATHINFO_FILENAME);\n    $uniqueFileName = $baseFileName . '_' . time() . '.' . $fileExtension;\n    \n    while (file_exists($uploadPath . '\/' . $uniqueFileName)) {\n        $uniqueFileName = $baseFileName . '_' . time() . rand(1000, 9999) . '.' . $fileExtension;\n    }\n\n    return $uniqueFileName;\n}\n\nfunction resizeImage($filePath, $maxWidth = 800, $maxHeight = 800) {\n    list($origWidth, $origHeight, $imageType) = getimagesize($filePath);\n\n    if ($origWidth <= $maxWidth && $origHeight <= $maxHeight) {\n        return;\n    }\n\n    $ratio = min($maxWidth \/ $origWidth, $maxHeight \/ $origHeight);\n    $newWidth = $origWidth * $ratio;\n    $newHeight = $origHeight * $ratio;\n\n    switch ($imageType) {\n        case IMAGETYPE_JPEG:\n            $image = imagecreatefromjpeg($filePath);\n            break;\n        case IMAGETYPE_PNG:\n            $image = imagecreatefrompng($filePath);\n            break;\n        case IMAGETYPE_WEBP:\n            $image = imagecreatefromwebp($filePath);\n            break;\n        default:\n            return;\n    }\n\n    $resizedImage = imagecreatetruecolor($newWidth, $newHeight);\n    imagecopyresampled($resizedImage, $image, 0, 0, 0, 0, $newWidth, $newHeight, $origWidth, $origHeight);\n\n    switch ($imageType) {\n        case IMAGETYPE_JPEG:\n            imagejpeg($resizedImage, $filePath, 90);\n            break;\n        case IMAGETYPE_PNG:\n            imagepng($resizedImage, $filePath, 9);\n            break;\n        case IMAGETYPE_WEBP:\n            imagewebp($resizedImage, $filePath, 90);\n            break;\n    }\n\n    imagedestroy($image);\n    imagedestroy($resizedImage);\n}\n\n$uploadPath = 'uploads\/';\n$maxFileSize = 5 * 1024 * 1024; \n$allowedTypes = [\n    'image\/jpeg', 'image\/png', 'image\/webp', 'application\/pdf',\n    'application\/msword', 'application\/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    'application\/vnd.ms-excel', 'application\/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n    'image\/svg+xml', 'application\/vnd.oasis.opendocument.text', 'application\/vnd.oasis.opendocument.spreadsheet'\n];\n\nif ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {\n    $file = $_FILES['file'];\n\n    if ($file['error'] !== UPLOAD_ERR_OK) {\n        $response["message"] = "Dosya y\u00fckleme hatas\u0131!";\n        echo json_encode($response);\n        exit;\n    }\n\n    if (!in_array($file['type'], $allowedTypes)) {\n        $response["message"] = "Ge\u00e7ersiz dosya t\u00fcr\u00fc!";\n        echo json_encode($response);\n        exit;\n    }\n\n    if ($file['size'] > $maxFileSize) {\n        $response["message"] = "Dosya boyutu 5MB\u2019\u0131 ge\u00e7emez!";\n        echo json_encode($response);\n        exit;\n    }\n\n    $safeFileName = makeFileNameSafe($file['name']);\n    $uniqueFileName = generateUniqueFileName($uploadPath, $safeFileName);\n    $filePath = $uploadPath . $uniqueFileName;\n\n    if (move_uploaded_file($file['tmp_name'], $filePath)) {\n        if (strpos($file['type'], 'image') === 0) {\n            resizeImage($filePath);\n        }\n        $response["status"] = true;\n        $response["fileName"] = $uniqueFileName;\n    } else {\n        $response["message"] = "Dosya y\u00fcklenirken hata olu\u015ftu!";\n    }\n} else {\n    $response["message"] = "Ge\u00e7ersiz istek!";\n}\n\necho json_encode($response);\n<\/pre><\/div>\n\n\n
Sonu\u00e7<\/h4>\n\n\n\n
Bu sistem sayesinde, AJAX kullanarak sayfa yenilemeden dosya y\u00fckleme<\/strong> yapabilir, PHP ile dosya y\u00fckleme g\u00fcvenli\u011fini sa\u011flayabilir<\/strong> ve g\u00f6rsel i\u015flemlerinde otomatik boyut d\u00fczenlemesi<\/strong> yapabilirsiniz. Geli\u015fmi\u015f web uygulamalar\u0131nda benzer y\u00f6ntemler kullanarak dosya y\u00fckleme i\u015f ak\u0131\u015f\u0131n\u0131 optimize edebilirsiniz. \ud83d\ude80<\/p>\n","protected":false},"excerpt":{"rendered":"
Web uygulamalar\u0131nda dosya y\u00fckleme i\u015flemleri, kullan\u0131c\u0131 deneyimini geli\u015ftiren \u00f6nemli \u00f6zelliklerden biridir. Geleneksel form tabanl\u0131 dosya y\u00fckleme … AJAX ile Dosya Y\u00fckleme ve PHP ile Sunucu Taraf\u0131nda G\u00fcvenli Kay\u0131t<\/span>Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":418,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[51],"tags":[],"class_list":["post-261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-tr"],"_links":{"self":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":1,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/posts\/261\/revisions\/315"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/media\/418"}],"wp:attachment":[{"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webmobdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}