JQuery Ajax 파일업로드 자동제출

1 개요[ | ]

jQuery Ajax File Upload Auto Submit
jQuery Ajax 파일업로드 자동제출

jQuery Ajax 파일 업로드 구현의 수정판
파일 선택시 자동으로 업로드됨
폼을 미리 만들어두지 않음

파일선택시 즉석에서 폼을 만들고 선택한 파일을 첨부하여 보냄(submit)

2 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() {
	$('#myfile').bind('change', function() {
		$("<form action='upload_ok.php' enctype='multipart/form-data' method='post'/>")
			.ajaxForm({
				dataType: 'json',
				beforeSend: function() {
					$('#result').append( "beforeSend...\n" );
				},
				complete: function(data) {
					$('#result')
						.append( "complete...\n" )
						.append( JSON.stringify( data.responseJSON ) + "\n" );
				}
			})
			.append( $(this) )
			.submit();
	});
});
</script>

<input type='file' id='myfile' name='myfile'>
<pre id='result'></pre>

3 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']
));

4 실행예시[ | ]

파일 선택하면...

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

5 같이 보기[ | ]