[PHP] ajax 이미지 업로드, 파일정보

FormData 객체를 통해서 HTML 폼데이터를 ajax통신으로 전송하는 소스 입니다.
스크립트를 통해서 파일확장자를 체크하고, swal confirm창으로 확인 후  test.php 로 값을 전송합니다.

아래는 HTML 화면 입니다.

업로드 파일명을 div 영역에 노출 시켜봤습니다.

 

<form class="form-horizontal" id="frm_treasure_info" name="frm_treasure_info" enctype="multipart/form-data" onsubmit="return false;" autocomplete="off">
	<div class="col-md-10">
		<label class="col-md-2 control-label">*보물명</label>
		<input type="text" class="form-control input-sm" name="treasure_nm" id="treasure_nm">
	</div>
	<label class="col-md-2 control-label">*사진 </label>
	<div class="col-md-10">
		<input type="file" name="treasure_upload" id="treasure_upload" style="display: none;">
		<button type="button" id="btn_img_upload" name="btn_img_upload">
			<strong>업로드</strong>
		</button>
		<div id="treasure_file_nm" style="margin-top:10px;"></div>
	</div>
	<button type="button" class="btn btn-info" id="btn_treasure_create">등록</button>
</form>

 

파일 확장자를 체크하고, ajax 통신을 하는 스크립트 소스 입니다.

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
$(function() {
	$('#btn_img_upload').click(function (e) {
		$('#treasure_upload').click();
	});
	$("#treasure_upload").change(function() {
		var fileTypes = ['jpg', 'png', 'gif', 'jpeg'];
		if (this.files && this.files[0]) {
			var reader = new FileReader();
			reader.fileName = this.files[0].name;
			var extension =  this.files[0].name.split('.').pop().toLowerCase(),
			isSuccess = fileTypes.indexOf(extension) > -1;
			if (isSuccess) {
				reader.onload = function(e) {
					$('#treasure_file_nm').text(e.target.fileName);
				}
			}else{
				swal("경고", "파일 확장자 형식이 올바르지 않습니다.", "error");
				return;
			}
			reader.readAsDataURL(this.files[0]);
		}
	});

	$("#btn_treasure_create").click(function() {
		var formData = new FormData($("#frm_treasure_info")[0]);
		swal({
		title: "등록하시겠습니까?",
		type: "warning",
		showCancelButton: true,
		confirmButtonColor: "#DD6B55",
		confirmButtonText: "예",
		cancelButtonText: "아니요",
		closeOnConfirm: false,
		closeOnCancel : true
		}, function (isConfirm) {
			if (!isConfirm) return;
			jQuery.ajax({
				type : "POST",
				url : "test.php",
				data : formData,
				cache: false,
				dataType : "json",
			    contentType: false,
                processData: false,
				success : function(data) {
					if(data.resultCode == "S000"){
						swal("실패", "작업수행에 성공하였습니다." , "error");
					} else {
						swal("실패", "작업수행에 실패하였습니다." , "error");
					}
				},
				error : function(e) {
					swal("실패", "작업수행에 실패하였습니다.", "error");
				}, timeout:100000
			});
		});
	});
});
</script>

 

test.php (업로드 페이지 입니다)

파일이름을 만들고, uploadFile 함수를 통해서 간단히 업로드 기능을 구현하실수 있습니다.

print_r로 통해서 정상적으로 파일 정보를 확인 하실수 있습니다.

 

Array ( [treasure_upload] => Array ( [name] => 11111.jpg [type] => image/jpeg [tmp_name] => /tmp/phpruK1NP [error] => 0 [size] => 1404 )

<?php
function makefileName($name){
  $ext = explode('.',$name);
  $ext = strtolower(array_pop($ext));
  return DATE('Ymd')."_".time().".".$ext;
}
function uploadFile($error, $file_nm, $file_tmp_nm, $newFileNm){
  $rst_cd = "0000";
  $uploads_dir = '/var/www/html/upload_img';
  $tmp_upload_name = $newFileNm;
  $upload_name = $tmp_upload_name;
  if( $error != UPLOAD_ERR_OK ) {
    switch( $error ) {
      case UPLOAD_ERR_INI_SIZE:
      case UPLOAD_ERR_FORM_SIZE:
      $rst_cd = "E001";
      break;
      case UPLOAD_ERR_NO_FILE:
      $rst_cd = "E002";
      break;
      default:
      $rst_cd = "E999";
    }
  }
  if($rst_cd == "0000"){
    move_uploaded_file($file_tmp_nm, $uploads_dir."/".$upload_name);
  }
  return $rst_cd;
}

$treasure_nm = $_REQUEST["treasure_nm"];
$treasure_file = $_FILES["treasure_upload"];
$file_nm = makefileName($treasure_file['name']);

print_r($_FILES);

$upload_result = uploadFile($treasure_file['error'],$treasure_file['name'],$treasure_file['tmp_name'],$file_nm);

?>