[jQuery - PHP] ajax로 form data 파일 업로드 (multipart)

html

<form method="POST" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="profile" />
    <button id='btnUpload'>확인</button>
</form>

 

javascript

$('#btnUpload').on('click', function(event) {
    event.preventDefault();
    
    var form = $('#uploadForm')[0]
    var data = new FormData(form);
    
    data.append('attachment', $('[name="profile"]').files[0])
    
    $('#btnUpload').prop('disabled', true);
	
    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/upload",
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        success: function (data) {
        	$('#btnUpload').prop('disabled', false);
        	alert('success')
        },
        error: function (e) {
            $('#btnUpload').prop('disabled', false);
            alert('fail');
        }
    });
})

 

upload.php

<?php
include 'SimpleImage.php';

$image          = $_FILES['attachment'];
$image_prefix   = 'path';
$thumnail       = uploadImage($image, $image_prefix);

$value = array('filename'=>$thumnail);
echo json_encode($value);


/**
 * upload image
 */
function uploadImage($image, $image_prefix) {
    if (isset($image)) {
        $types = split('/', $image['type']);
        $image_extend = $types[1];
        $image_size = floatval($image['size']);
        $image_name = $image_prefix . '_' . time() . '.' . $image_extend;
    }
    if ($image_size > 3145728) {
        //echo "3M를 초과할수 없습니다."
    }
    if (isset($image)) {
        move_uploaded_file($image['tmp_name'], '../upload/' . $image_prefix . '/ori/' . $image_name);
        
        // 사이즈 조절
        $resize_image = new SimpleImage();
        $resize_image->load('../upload/' . $image_prefix . '/ori/' . $image_name);
        $resize_image->resizeToWidth(350);
        $resize_image->save('../upload/' . $image_prefix . '/thum/' . $image_name);
    }
    return $image_name;
}

?>

 

SimpleImage.php

<?php

class SimpleImage {
	
	var $image;
	var $image_type;
 
	function load($filename) {
		$image_info = getimagesize($filename);
		$this->image_type = $image_info[2];
		if( $this->image_type == IMAGETYPE_JPEG ) {
			$this->image = imagecreatefromjpeg($filename);
		} elseif( $this->image_type == IMAGETYPE_GIF ) {
			$this->image = imagecreatefromgif($filename);
		} elseif( $this->image_type == IMAGETYPE_PNG ) {
			$this->image = imagecreatefrompng($filename);
		}
	}
	function save($filename, $image_type=IMAGETYPE_JPEG, $compression=75, $permissions=null) {
		if( $image_type == IMAGETYPE_JPEG ) {
			imagejpeg($this->image,$filename,$compression);
		} elseif( $image_type == IMAGETYPE_GIF ) {
			imagegif($this->image,$filename);			
		} elseif( $image_type == IMAGETYPE_PNG ) {
			imagepng($this->image,$filename);
		}	
		if( $permissions != null) {
			chmod($filename,$permissions);
		}
	}
	function output($image_type=IMAGETYPE_JPEG) {
		if( $image_type == IMAGETYPE_JPEG ) {
			imagejpeg($this->image);
		} elseif( $image_type == IMAGETYPE_GIF ) {
			imagegif($this->image);			
		} elseif( $image_type == IMAGETYPE_PNG ) {
			imagepng($this->image);
		}	
	}
	function getWidth() {
		return imagesx($this->image);
	}
	function getHeight() {
		return imagesy($this->image);
	}
	function resizeToHeight($height) {
		$ratio = $height / $this->getHeight();
		$width = $this->getWidth() * $ratio;
		$this->resize($width,$height);
	}
	function resizeToWidth($width) {
		$ratio = $width / $this->getWidth();
		$height = $this->getheight() * $ratio;
		$this->resize($width,$height);
	}
	function scale($scale) {
		$width = $this->getWidth() * $scale/100;
		$height = $this->getheight() * $scale/100; 
		$this->resize($width,$height);
	}
	function resize($width,$height) {
		$new_image = imagecreatetruecolor($width, $height);
		imagecopyresampled($new_image, $this->image, 0, 0, 0, 0, $width, $height, $this->getWidth(), $this->getHeight());
		$this->image = $new_image;	
	}		
}

?>

 

 

 

 

input file 이미지 미리보기:

https://romeoh.tistory.com/entry/input-file-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%EA%B5%AC%ED%98%84