28
2017-Aug
[php/jQuery/Ajax] 파일 업로드 구현
작성자: 
Blonix
IP ADRESS: *.64.228.3 조회 수: 1463
참고1:: https://zetawiki.com/wiki/JQuery_Ajax_%ED%8C%8C%EC%9D%BC_%EC%97%85%EB%A1%9C%EB%93%9C_%EA%B5%AC%ED%98%84
참고2:: http://airpage.org/xe/language_data/17115
아래의 경우는 ajaxForm 라이브러리를 사용할 때 쓸 수 있다. 만약 사이트 최적화를 위해 쓰고싶지 않다면 1.1 을 참고.
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>1.1 upload.html : without ajaxForm
제일 상단의 두번째 스크립트 링크를 삭제하고, 폼 양식은 지워도 된다.
위의 $("#myform").ajaxForm({ ~~ 부터 아래 코드로 바꾸면 된다.
폼을 지웠기 때문에 그냥 라벨이나 버튼 달아서 연결하는 함수로 손을 보자
$("#myform").submit( function(e){ e.preventDefault(); var datas, xhr; datas = new FormData(); datas.append( 'service_image', $( '#service_image' )[0].files[0] ); $.ajax({ url: someurl, //업로드할 url contentType: 'multipart/form-data', type: 'POST', data: datas, dataType: 'json', mimeType: 'multipart/form-data', success: function (data) { alert( data.url ); }, error : function (jqXHR, textStatus, errorThrown) { alert('ERRORS: ' + textStatus); }, cache: false, contentType: false, processData: false }); });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']
));