PHP AJAX 파일 업로드 구현(+코드예제)

PHP AJAX 파일 업로드 구현

ajax 파일 업로드 form 없이 처리하는 방법입니다.
여러파일을 한번에 업로드되도록 처리 가능합니다.
파일 업로드 후 php 파일에서 파일명과 확장자명을 보내주므로 console.log를 통하여 확인할 수 있습니다.

 

html

<!-- 첨부파일 업로드 input -->
<input type="file" name="file" class="file_select"" multiple="">

<!-- ajax jquery cdn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(".file_select").change(function(){
	var fileName = []; // 파일 갯수를 배열에 누적하여 갯수 카운트 
	var formData = new FormData(); // 전송할 formData
	for(var i=0; i<$(this)[0].files.length;i++){ // 선택된 파일만큼 loop
		formData.append("file"+i, $(this)[0].files[i]);
		fileName.push($(this)[0].files[i].name);
	}
	formData.append("cnt", fileName.length);
	$.ajax({
		type: "POST",
		enctype: 'multipart/form-data',	// 필수
		url: 'upload.php',
		data: formData,		// 필수
		processData: false,	// 필수
		contentType: false,	// 필수
		cache: false,
		dataType:'json',
		success: function (result) {
			console.log(result);
        },
			error: function (e) {
		}    
	})
</script>

 

php

// 리턴할 객체 초기화
$data = array();

// 파일 갯수만큼 loop
for($i=0;$i<$_POST['cnt'];$i++){
	$fileNumber = 'file'.$i;
	if($_FILES[$fileNumber]['name']) {
		$uploaded_file_name_tmp = $_FILES[$fileNumber]['tmp_name'];
		$uploaded_file_name = $_FILES[$fileNumber]['name'];
		$ext = substr(strrchr($uploaded_file_name, '.'), 1); 
		$uploaded_file_name = date("YmdHis").rand(10,99).".".$ext;
		move_uploaded_file( $uploaded_file_name_tmp,$upload_folder.$uploaded_file_name);
	}
    
	// 리턴할 객채에 추가
	$data['file'][$i]['name'] = $uploaded_file_name;
	$data['file'][$i]['file_ext'] = $ext;
	echo json_encode( $data );
}

참고 : https://seven7day.tistory.com/13