JQuery Ajax 파일 업로드 구현

jQuery Ajax 파일 업로드 구현

1 upload.html[ | ]

<script src='//code.jquery.com/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js'></script>
<script>
$(function() {
	$('#myform').ajaxForm({
		dataType: 'json',
		beforeSend: function() {
			$('#result').append( "beforeSend...\n" );
		},
		complete: function(data) {
			$('#result')
				.append( "complete...\n" )
				.append( JSON.stringify( data.responseJSON ) + "\n" );
		}
	});
});
</script>

<form id='myform' action='upload_ok.php' enctype='multipart/form-data' method='post'>
	<input type='file' name='myfile'>
	<button>업로드</button>
</form>
<pre id='result'></pre>

2 upload_ok.php[ | ]

<?php
 
// 설정
$uploads_dir = '/uploads';
$allowed_ext = array('jpg','jpeg','png','gif');
 
// 오류 확인
if( !isset($_FILES['myfile']['error']) ) {
	echo json_encode( array(
		'status' => 'error',
		'message' => '파일이 첨부되지 않았습니다.'
	));
	exit;
}
$error = $_FILES['myfile']['error'];
if( $error != UPLOAD_ERR_OK ) {
	switch( $error ) {
		case UPLOAD_ERR_INI_SIZE:
		case UPLOAD_ERR_FORM_SIZE:
			$message = "파일이 너무 큽니다. ($error)";
			break;
		case UPLOAD_ERR_NO_FILE:
			$message = "파일이 첨부되지 않았습니다. ($error)";
			break;
		default:
			$message = "파일이 제대로 업로드되지 않았습니다. ($error)";
	}
	echo json_encode( array(
		'status' => 'error',
		'message' => $message 
	));
	exit;
}

// 변수 정리
$name = $_FILES['myfile']['name'];
$ext = array_pop(explode('.', $name));

// 확장자 확인
if( !in_array($ext, $allowed_ext) ) {
	echo json_encode( array(
		'status' => 'error',
		'message' => '허용되지 않는 확장자입니다.'
	));
	exit;
}
 
// 파일 이동
move_uploaded_file( $_FILES['myfile']['tmp_name'], "$uploads_dir/$name");
 
// 파일 정보 출력
echo json_encode( array(
	'status' => 'OK',
	'name' => $name,
	'ext' => $ext,
	'type' => $_FILES['myfile']['type'],
	'size' => $_FILES['myfile']['size']
));

3 실행예시[ | ]

파일 선택하지 않고 [업로드] 클릭하면...

beforeSend...
complete...
{"status":"error","message":"파일이 첨부되지 않았습니다."}

파일 선택하고 [업로드] 클릭하면...

beforeSend...
complete...
{"status":"OK","name":"test.gif","ext":"gif","type":"image/gif","size":299764}

4 같이 보기[ | ]