Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on print
Print

PHP 또는 Javascript를 사용하여 Image를 Upload하는 코드를 정리한다.


Type1. PHP Post Method Upload

1) 참고 문서

2) 이 유형의 주요 부분은

  • <form> : <form … enctype=”multipart/form-data”>
  • <input> : <input … type=”file” name=”fileToUpload”>
  • $_FILES[“fileToUpload”]1 : $_FILES[“fileToUpload”][“name”]과 같이 name, type, size, tmp_name, error 아이템을 갖는다.

3) 동작 방식은

  1. 사용자가 input 태그가 보여주는 파일선택 버튼을 누르면, 파일선택 창이 나타난다.
  2. 파일을 선택하면 서버의 기본 temporary 폴더에 해당 파일을 옮겨두고, $_FILES 전역 변수에 값을 설정한다.
  3. 서버는 적절한 validation 과정을 통해 파일을 검증하고, 검증이 완료되면 move_uploaded_file 함수를 통해 원하는 폴더로 파일을 이동시킨다.

4) 코드

upload.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>파일 업로드 w/ PHP</title>
</head>
<body>
	<form action="" method="post" enctype="multipart/form-data">
		Select image to upload: 
		<input type="file" name="fileToUpload" id="fileToUpload"> 
		<input type="submit" value="Upload Image" name="submit">
	</form>
</body>
</html>

<?php
if (isset($_POST["submit"])) {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
    $output = "";

    // Check if image file is a actual image or fake image
    if (getimagesize($_FILES["fileToUpload"]["tmp_name"]) == false) {
        echo "File is not an image.";
        return;
    }
    $output .= "File is an image.<br>";

    // Check if file already exists
    if (file_exists($target_file)) {
        echo "Sorry, file already exists.";
        return;
    }

    // Check file size
    if ($_FILES["fileToUpload"]["size"] > 500000) {
        echo "Sorry, your file is too large.";
        return;
    }

    // Allow certain file formats
    if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
        echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
        return;
    }

    // upload
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        $output .= "The file " . basename($_FILES["fileToUpload"]["name"]) . " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
        return;
    }

    echo $output;
}

Type2. PHP Post Method Upload + Preview with ajax

1) 참고 문서

https://makitweb.com/how-to-upload-image-file-using-ajax-and-jquery/ 2

html, css, js, php 4개의 파일로 구성되며, 각각의 동작은 다음과 같다.

2) html – 업로드할 파일 선택

ajax 사용을 위해 jquery 및 upload.js 라이브러리를 포함시킨다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>파일 업로드 w/ PHP & ajax</title>
    <link rel="stylesheet" type="text/css" href="upload.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="upload.js"></script>
</head>
<body>
    <div class="container">
        <form method="post" action="" enctype="multipart/form-data" id="myform">
            <div class='preview'>
                <img src="" id="img" width="100" height="100">
            </div>
            <div >
                <input type="file" id="file" name="file" />
                <input type="button" class="button" value="Upload" id="but_upload">
            </div>
        </form>
    </div>    
</body>
</html>

3) js

선택된 파일의 정보를 담아 php 코드를 호출하고, 그 결과를 받아 성공인 경우 preview 영역에 이미지를 표시하고, 실패인 경우 메시지를 출력한다.

$(document).ready(function(){
    
    $("#but_upload").click(function(){

        var fd = new FormData();
        var files = $('#file')[0].files[0];
        fd.append('file',files);

        $.ajax({
            url: 'upload.php',
            method: 'post',
            data: fd,
            contentType: false,
            dataType:"json",
            processData: false,
            success: function(response){
                if(response.success == 1){
                    $("#img").attr("src",response.location); 
                    $(".preview img").show(); // Display image element
                }else{
                    alert('file not uploaded : ' + response.message);
                }
            },
        });
    });    
});

4) php

<?php
/* Getting file name */
$filename = $_FILES ['file'] ['name'];
$target_file = "uploads/" . basename ( $filename );
$imageFileType = pathinfo ( $target_file, PATHINFO_EXTENSION );

// Check if image file is a actual image or fake image
if (getimagesize ( $_FILES ["file"] ["tmp_name"] ) == false) {
	die (json_encode ( array (
			'success' => 0,
			'message' => "File is not an image."
	) ));
}

// Check if file already exists
if (file_exists ( $target_file )) {
	die (json_encode ( array (
			'success' => 0,
			'message' => "Sorry, file already exists."
	) ));
}

// Check file size
if ($_FILES ["file"] ["size"] > 500000) {
	die ( json_encode ( array (
			'success' => 0,
			'message' => "Sorry, your file is too large."
	) ) );
}

// Allow certain file formats
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
	die ( json_encode ( array (
			'success' => 0,
			'message' => "Sorry, only JPG, JPEG, PNG & GIF files are allowed."
	) ) );
}

// upload
if (! move_uploaded_file ( $_FILES ["file"] ["tmp_name"], $target_file )) {
	die ( json_encode ( array (
			'success' => 0,
			'message' => "Sorry, there was an error uploading your file."
	) ) );
}

// success
die (json_encode ( array (
		'success' => 1,
		'location' => $target_file,
		'message' => "The file " . basename ( $_FILES ["file"] ["name"] ) . " has been uploaded."
) ));
?>

5) css

/* Container */
.container{
   margin: 0 auto;
   border: 0px solid black;
   width: 50%;
   height: 250px;
   border-radius: 3px;
   background-color: ghostwhite;
   text-align: center;
}
/* Preview */
.preview{
   width: 100px;
   height: 100px;
   border: 1px solid black;
   margin: 0 auto;
   background: white;
}

.preview img{
   display: none;
}
/* Button */
.button{
   border: 0px;
   background-color: deepskyblue;
   color: white;
   padding: 5px 15px;
   margin-left: 10px;
}

Type3. Javascript Ajax Upload

1. 참조문서

Footnotes

  1. fileToUpload는 위 input tag의 name 값으로 설정된다.
  2. 2019년 포스팅으로 보이는데 jquery 1.9.0 이전 버전 기준이다. ajax 옵션 중 type은 method로 바꿔야 한다. https://api.jquery.com/jquery.ajax/

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다

  • 카테고리

  • Count per Day

    • 218This post:
    • 106610Total reads:
    • 60709Total visitors:
    • 25Reads today:
    • 25Visitors today:
    • 2019년 3월 10일Counter starts on: