Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

투덜이 개발자

PHP + AJAX를 사용하여 파일 업로드 하기 본문

Program Language/PHP

PHP + AJAX를 사용하여 파일 업로드 하기

엠투 2021. 11. 30. 15:37
반응형

PHP + AJAX를 사용하여 파일 업로드 하기

enctype: 'multipart/form-data', // 필수 
processData: false, // 필수 
contentType: false, // 필수
data: formData, // 필수

ajax_file_upload_test.html : 파일 업로드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX를 사용하여 파일 업로드 하기</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
	function file_frm_submit(frm) {

		var fileCheck = frm.upload_file.value;

		if(!fileCheck) {
			alert("업로드할 파일을 선택하세요.");
			return false;
		}

		var formData = new FormData(frm);			// 파일전송을 위한 폼데이터 객체 생성

		formData.append("message", "ajax로 파일 전송하기");
		//formData.append("file", jQuery("#upload_file")[0].files[0]);

		$.ajax({
			url			: 'ajax_file_upload_test.php',
			type		: 'POST',
			dataType	: 'html',
			enctype		: 'multipart/form-data',
			processData	: false,
			contentType	: false,
			data		: formData,
			async		: false,
			success		: function(response) {

				console.log(response);

			}
		});
	}

</script>

<form id="file_frm">
	<input type="file" name="upload_file" id="upload_file">
	<br><br>
	<button type="button" name="upload_btn" onClick="file_frm_submit(this.form)">ajax 업로드</button>
</form>

</body>
</html>

 

ajax_file_upload_test.php : PHP  업로드 처리 

<?
	echo "<pre>";
	print_r($_POST);
	echo "</pre>";

	echo "<pre>";
	print_r($_FILES);
	echo "</pre>";
	//exit;

	if($_FILES['upload_file']['size'] > 0) {

		$file_tmp_name = $_FILES['upload_file']['tmp_name'];
		$save_filename = $_SERVER['DOCUMENT_ROOT'] . "/test/upload/" . $_FILES['upload_file']['name'];

		$file_upload	= move_uploaded_file($file_tmp_name, $save_filename);

	} else {
		echo "failed";
	}
?>

 

전송 결과 : 크롬 개발자 모드 확인

 

<form></form>  태그를 사용하지 않고도 가능합니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX를 사용하여 파일 업로드 하기 두번째</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
	function file_frm_submit() {

		var form = $('#upload_file')[0].files[0];
		var formData = new FormData();

		formData.append('upload_file', form);	

		formData.append("message", "ajax로 파일 전송하기");	// 전송할 데이터 메세지 추가


		$.ajax({
			url			: 'ajax_file_upload_test.php',
			type		: 'POST',
			dataType	: 'html',
			enctype		: 'multipart/form-data',
			processData	: false,
			contentType	: false,
			data		: formData,
			async		: false,
			cache		: false,
			timeout		: 600000,
			success		: function(response) {
				console.log(response);
				alert("성공");
			},
			error: function (e) {
				alert("실패");
			}
		});
	}

</script>


	<input type="file" name="upload_file" id="upload_file">
	<br><br>
	<button type="button" name="upload_btn" onClick="file_frm_submit()">ajax 업로드</button>


</body>
</html>

 

파일 업로드가 아닌경우에는 데이터를 serialize() 하여 보낼수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX를 사용하여 폼전송</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
function formSubmit() {
	var params = jQuery("#formname1").serialize(); // serialize() : 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.

	console.log(params);

	jQuery.ajax({
		url: 'ajax_file_upload_test.php',
		type: 'POST',
		data:params,
		contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
		dataType: 'html',
		success: function (result) {
			if (result){
				// 데이타 성공일때 이벤트 작성
				console.log(result);

			}
		}
	});
}
</script>


<form name="formname1" id="formname1" style="margin:0px;">
	<input type="text" name="text1" id="text1" value="aa">
	<input type="text" name="text2" id="text2" value="bb">
	<input type="text" name="text3" id="text3" value="ccc">
	<input type="text" name="text4" id="text4" value="dddd">
	<input type="button" value="Ajax 폼 전송" onclick="formSubmit()" />
</div>
</form>

</body>
</html>

 

빈필드값 제거 할때

let params = $("#searchForm :input")
      .filter(function(index, element) {
         //console.log('index : ' + index + ', element: ' + element + ', element: ' + $(element).val());
         return $(element).val() != '';
      })
      .serialize();
let params = $( "#searchForm input").filter(function () {
   return !!this.value;
}).serialize();
반응형
저작자표시

'Program Language > PHP' 카테고리의 다른 글

아파치 Forbidden You don’t have permission to access / on this server. 에러 해결  (0) 2022.01.19
한글 도메인 퓨티 코드 변환  (0) 2021.12.01
convert 를 이용하여 pdf to jpg 로 변환  (0) 2021.11.12
PHP 부활절달걀(PHP Easter Egg)  (0) 2021.07.22
PHP 한글 도메인 퓨니코드 변환 (Punycode)  (0) 2021.06.04
'Program Language/PHP' Related Articles more