테스트 사이트 - 개발 중인 베타 버전입니다
SIR

파일업로드시 이미지 파일 특정 크기로 미리 줄여서 업로드 하기

식냥이
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 1년 전 · 565

작업간에 필요하여 Chat Gpt 에게 물어보면서 구현한 테스트 코드 입니다.

 

html 스크립트 코드는 아래와 같이 진행하고

서버단에서 썸네일 과정이 없기 때문에 쾌적하게 이용 가능합니다.

여러 사이즈로 resize가 필요한 경우에는 코드는 수정 해주셔야 합니다.

 

upload.php 파일로 저장해 주는 로직 입니다.

 

따로 라이브러리 사용하지 않고 진행 가능합니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Resize and Upload</title>
</head>
<body>
    <input type="file" id="fileInput" onchange="handleFileSelect(event)"/>
    <button id="uploadButton" onclick="uploadImage()">Upload</button>
    <img src="" id="pre_view" />
    <script>

        let resizedImage;

        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file && file.type.startsWith('image/')) { // Only process image files
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        const MAX_WIDTH = 1000; // 원하는 최대 너비
                        const MAX_HEIGHT = 1000; // 원하는 최대 높이
                        let width = img.width;
                        let height = img.height;

                        // 비율에 맞게 크기 조정
                        if (width > height) {
                            if (width > MAX_WIDTH) {
                                height *= MAX_WIDTH / width;
                                width = MAX_WIDTH;
                            }
                        } else {
                            if (height > MAX_HEIGHT) {
                                width *= MAX_HEIGHT / height;
                                height = MAX_HEIGHT;
                            }
                        }

                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0, width, height);
                        resizedImage = canvas.toDataURL(file.type, 0.9); // 품질 90%
                    };
                    img.src = e.target.result;
                    document.getElementById('pre_view').src=e.target.result;
                };
                reader.readAsDataURL(file);
            } else {
                console.error('Selected file is not an image.');
            }
        }

        function uploadImage() {
            if (resizedImage) {
                const formData = new FormData();
                formData.append('image', resizedImage);

                fetch('/upload.php', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => console.log('Success:', data))
                .catch(error => console.error('Error:', error));
            } else {
                console.log('No image selected or image not resized yet.');
            }
        }
    </script>
</body>
</html>

 

upload.php

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $uploadDir = 'uploads/;
    $response = ['status' => 'success'];

    if (isset($_POST['image'])) {
        $data = $_POST['image'];

        if (preg_match('/^data:image\/(\w+);base64,/', $data, $typeMatch)) {
            $data = substr($data, strpos($data, ',') + 1);
            $type = strtolower($typeMatch[1]); // jpg, png, gif 등

            if (!in_array($type, ['jpg', 'jpeg', 'gif', 'png'])) {
                $response['status'] = 'error';
                $response['message'] = 'Invalid image type';
                echo json_encode($response);
                exit;
            }

            $data = base64_decode($data);

            if ($data === false) {
                $response['status'] = 'error';
                $response['message'] = 'Base64 decode failed';
                echo json_encode($response);
                exit;
            }

            $filePath = $uploadDir . uniqid() . '.' . $type;
            if (file_put_contents($filePath, $data)) {
                $response['file'] = $filePath;
            } else {
                $response['status'] = 'error';
                $response['message'] = 'Failed to save file';
            }
        } else {
            $response['status'] = 'error';
            $response['message'] = 'Invalid data URI';
        }
    } else {
        $response['status'] = 'error';
        $response['message'] = 'No image data';
    }


    echo json_encode($response);
}else {
    // Handle invalid request methods
    $response = ['status' => 'error', 'message' => 'Invalid request method'];
    echo json_encode($response);
}
?>

 

목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
17523
Laravel 오유 "failed to open stream: Permission denied" 퇴치방법 1
17516
php 몇분전, 몇시간전, 몇일전 함수 6
17515
내 계정 파일, DB 백업 스크립트
17514
PHP PHP 배열순설정 1
17498
PHP PHP로 PDF파일 다루기 4
17493
PHP PHP를 사용하여 FTP를 이용하는 방법 1
17490
PHP PHP와 MSSQL의 연동 코드 실례 1
17487
PHP 객체로 간단한 부트스트랩 매뉴 제작 함수
17485
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기 7 - JSONP 5
17481
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기 6- CORS 1
17478
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기5- 파일업로드 1
17477
PHP include와 DB해킹. 그러나 Fopen의 r 옵션만? 트릭으로 쓴다면? 1
17474
기타 자동방지문자가 안보이는 경우 - 유블럭
17473
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기4 - JSON
17472
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기3 - URL Encoding 3
17470
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기2 - POST
17469
JavaScript jQuery없이 네티브자바스크립트로 서버에 요청보내기1 - GET 2
17463
JavaScript express로 간단한 부트스트랩 내비게이션 메뉴 생성기(아주 쉬움)
17462
기타 C#에서 WWW-Authenticate를 통과하는 방법
17461
PHP PHP로 채트서버 만들기
17460
JavaScript ThreeJS로 3디 지구 만들기
17458
PHP PHP에서 파일다운로드기능 구현하기
17457
PHP PHP 랜덤생성하기
17454
기타 cmd, powershell 명령 몇가지
17453
MySQL DB백업코드 5
17448
JavaScript 숫자에 천단위로 콤마(,) 찍기 11
17447
PHP PHP CURL로 사이트 로그인 하고 그 정보 유지하기 1
17446
MySQL utf8mb4_unicode_ci와 utf8mb4_general_ci의 차이점 3
17445
node.js 운영중인 서비스가 알지못할 에러(uncaughtException)발생으로 중지되지 않게 하기
17444
node.js nodejs 에서 CSV파일 파싱하여 배열로 변환하기
이전 다음
전체 목록