요즘 Ajax를 사용하는게 너무 재밌는 것 같다. 새로고침 없이 바로바로 결과가 나오는 점에서 크게 인상적이다. 텍스트 방식의 Ajax를 몇번써서 이미지 업로드도 크게 다른건 없을거라 생각했는데 지속적으로 에러가 발생했다.

1
2
3
4
5
<form id='image-form' enctype='multipart/form-data'>
	<input type='file' name='image'>
	<button type="button" onclick="image_upload();">보내기</button>
</form>
<p id="image-url"></p>

HTML은 위와같이 작성되었다. 이미지를 업로드하면 업로드된 경로가 p태그에 들어갈 것이다. 스크립트 파일은 아래와 같이 작성되었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function image_upload() {
    var image_form = document.getElementById('image-form');
	formData = new FormData(image_form);
	$.ajax({
		url: "upload.php",
		type: "post",
		data: formData,
		contentType: false,
		cache: false,
		processData:false,
	}).done(function(data) {
		document.getElementById('image-url').innerHTML = data;
	});
}

위에서 핵심적인 부부은 formData를 사용한 부분이다. 텍스트를 전송할땐 아무렇게나 보내도(?) 큰 상관없었지만 이미지를 보내는 경우엔 위와같이 보내지 않으면 제대로 전송되지 않는다.


PHP코드는 일반적인 이미지 업로드 코드지만 행여나 그 코드가 필요한 사람들을 위해서 코드를 작성해 놓도록 할 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
$allowed_ext = array('jpg','jpeg','png','gif');

$name = $_FILES['image']['name'];
$error = $_FILES['image']['error'];
$ext = array_pop(explode('.', $name));

if(!in_array($ext, $allowed_ext)) {
	echo "허용되지 않는 확장자입니다.";
	exit;
}

if( $error != UPLOAD_ERR_OK ) {
	switch( $error ) {
		case UPLOAD_ERR_INI_SIZE:
		case UPLOAD_ERR_FORM_SIZE:
			echo "파일이 너무 큽니다. ($error)";
			break;
		case UPLOAD_ERR_NO_FILE:
			echo "파일이 첨부되지 않았습니다. ($error)";
			break;
		default:
			echo "파일이 제대로 업로드되지 않았습니다. ($error)";
	}
	exit;
}

if(move_uploaded_file($_FILES['image']['tmp_name'], 'uploads/'.$name)){
    echo 'uploads/'.$name;
} else {
    echo "이미지 업로드를 실패하였습니다.";
}
?>
WRITTEN BY

배진오

하고싶은 건 다 하면서 사는게 목표
im@baejino.com

comments powered by Disqus