고정 헤더 영역
상세 컨텐츠
본문
728x90
ajax.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax post 전송</title>
<style>
#dis {
margin-top : 30px;
width : 300px;
}
#dis img {
max-width: 100%;
}
</style>
</head>
<body>
<form id="form1" action="" method="post" enctype="multipart/form-data"> <!-- ajax방식으로 전송하기에 action을 비워도 됨 -->
<input type="file" name="photo"> <input type="button" value="확인" id="upload_btn">
</form>
<div id="dis"></div>
<script>
const upload_btn = document.querySelector("#upload_btn"); // id가 upload_btn인 요소를 찾아 할당
upload_btn.addEventListener("click", () => { //id가 upload_btn인 요소를 클릭하면 콜백 함수 실행 (addEventListener)
const f = document.querySelector("#form1"); // f 상수에는 id가 form1인 요소를 할당
const f1 = new FormData(f); // FormData 객체를 생성하여 f1 상수에 할당 f를 전달하여 폼 데이터를 가져옴 FormData = 폼 데이터를 쉽게 다룰 수 있도록 도와줌
const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체를 생성하여 xhr에 할당, XMLHttpRequest를 사용하여 서버와의비동기 통신을 처리
xhr.open("POST", "./ajax.php", true); // Post 방식으로 ./ajax.php에 줄 것이다 true = 비동기 방식, false = 동기 방식
xhr.send(f1); // send 메서드를 사용하여 HTTP 요청을 보냄, 보내는 데이터는 f1이다. 이렇게 함으로써 서버에 파일 업로드 요청이 전송
// 처리 후
xhr.onload = () => {
if(xhr.status == 200) { // 상태코드가 200이면
const data = JSON.parse(xhr.responseText); // 서버로부터 받은 응답 텍스트를 JSON 형식으로 파싱. responseText = 서버로부터 받은 응답 데이터를 문자열로 나타냄
if(data.result == 'success') { // 파싱된 JSON데이터에서 result 속성이 success인지 확인
const dis = document.querySelector('#dis'); // HTML문서에서 id가 dis인 요소를 찾아서 할당
dis.innerHTML = '<img src="' + data.img + '">'; // dis 요소의 내용을 변경하여 이미지 태그를 추가, 해당 이미지 태그의 src 속성에는 서버로부터 받은 이미지 경로 ('data.img') 가 할당
}
}
}
});
</script>
</body>
</html>
ajax.php
<?php
/*
$_FILES = PHP에서 파일 업로드 시 사용되는 슈퍼 전역 변수
photo = ajax.html에서 정의한 input name
tmp_name = 업로드된 파일의 임시 저장 경로를 가르킴
"uploadimg/" = 복사한 파일의 저장 경로
$_FILES['photo']['name'] = 업로드한 파일의 원래 이름을 사용해서 저장
*/
copy($_FILES['photo']['tmp_name'], "uploadimg/". $_FILES['photo']['name']);
/*
$arr에 연관 배열을 할당
연관 배열은 result와 img 2개의 키를 가지고 있음
result 키에는 문자열 succuss가 할당되어 업로드 결과를 나타냄
img 키에는 업로드된 이미지의 경로를 나타내는 문자열이 할당, 이 경로는 업로드된 파일의 원래 이름을 포함하는 디렉토리 경로와 조합
*/
$arr = array("result" => "success", "img" => "uploadimg/". $_FILES['photo']['name']);
die(json_encode($arr));
멀티 업로드
ajax.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax post 전송</title>
<style>
#dis {
margin-top : 30px;
width : 300px;
}
#dis img {
max-width: 100%;
}
</style>
</head>
<body>
<form id="form1" action="" method="post" enctype="multipart/form-data"> <!-- ajax방식으로 전송하기에 action을 비워도 됨 -->
<input type="file" name="photo[]" multiple>
<input type="button" value="확인" id="upload_btn">
</form>
<div id="dis"></div>
<script>
const upload_btn = document.querySelector("#upload_btn"); // id가 upload_btn인 요소를 찾아 할당
upload_btn.addEventListener("click", () => { //id가 upload_btn인 요소를 클릭하면 콜백 함수 실행 (addEventListener)
const f = document.querySelector("#form1"); // f 상수에는 id가 form1인 요소를 할당
const f1 = new FormData(f); // FormData 객체를 생성하여 f1 상수에 할당 f를 전달하여 폼 데이터를 가져옴 FormData = 폼 데이터를 쉽게 다룰 수 있도록 도와줌
const xhr = new XMLHttpRequest(); // XMLHttpRequest 객체를 생성하여 xhr에 할당, XMLHttpRequest를 사용하여 서버와의비동기 통신을 처리
xhr.open("POST", "./ajax.php", true); // Post 방식으로 ./ajax.php에 줄 것이다 true = 비동기 방식, false = 동기 방식
xhr.send(f1); // send 메서드를 사용하여 HTTP 요청을 보냄, 보내는 데이터는 f1이다. 이렇게 함으로써 서버에 파일 업로드 요청이 전송
// 처리 후
xhr.onload = () => {
if(xhr.status == 200) { // 상태코드가 200이면
const data = JSON.parse(xhr.responseText); // 서버로부터 받은 응답 텍스트를 JSON 형식으로 파싱. responseText = 서버로부터 받은 응답 데이터를 문자열로 나타냄
if(data.result == 'success') { // 파싱된 JSON데이터에서 result 속성이 success인지 확인
if(data.img.indexOf('|') != -1) { // | 이게 있는지 찾아냄
const imgs = data.img.split('|'); // |가 발견되면 쪼개서 배열로 만듬
for(let img of imgs) { // for of 반복문은 배열에 있는 요소를 하나씩 던져줌
dis.innerHTML += '<img src="' + img + '">'; // += 으로 이어주기 그냥 = 이면 덮어 씌움
}
} else {
dis.innerHTML += '<img src="' + data.img + '">'; // dis 요소의 내용을 변경하여 이미지 태그를 추가, 해당 이미지 태그의 src 속성에는 서버로부터 받은 이미지 경로 ('data.img') 가 할당
}
}
}
}
});
</script>
</body>
</html>
ajax.php
<?php
/*
$_FILES = PHP에서 파일 업로드 시 사용되는 슈퍼 전역 변수
photo = ajax.html에서 정의한 input name
tmp_name = 업로드된 파일의 임시 저장 경로를 가르킴
"uploadimg/" = 복사한 파일의 저장 경로
$_FILES['photo']['name'] = 업로드한 파일의 원래 이름을 사용해서 저장
copy($_FILES['photo']['tmp_name'], "uploadimg/". $_FILES['photo']['name']);
*/
/*
$arr에 연관 배열을 할당
연관 배열은 result와 img 2개의 키를 가지고 있음
result 키에는 문자열 succuss가 할당되어 업로드 결과를 나타냄
img 키에는 업로드된 이미지의 경로를 나타내는 문자열이 할당, 이 경로는 업로드된 파일의 원래 이름을 포함하는 디렉토리 경로와 조합
$arr = array("result" => "success", "img" => "uploadimg/". $_FILES['photo']['name']);
*/
// die(json_encode($arr));
// print_r($_FILES);
// 멀티 업로드를 할 경우 사진의 데이터가 배열형태로 넘어옴
if(is_array($_FILES['photo']['tmp_name'])) {
$cnt = count($_FILES['photo']['tmp_name']); // 업로드 된 파일의 수를 파악
$rs_arr = []; // rs_arr 배열 생성
for ($i = 0; $i < $cnt; $i++) {
copy($_FILES['photo']['tmp_name'][$i], "uploadimg/". $_FILES['photo']['name'][$i]); // 각 파일을 복사
$rs_arr[] = "uploadimg/". $_FILES['photo']['name'][$i]; // 파악된 파일을 배열에 추가
}
$arr = array("result" => "success", "img" => implode('|', $rs_arr)); // 각 파일을 | 로 구분, uploadimg/1.png|uploadimg/2.png 이런식으로 받겠다
die(json_encode($arr)); // {"result" : "success", "img" : "uploadimg/1.png|uploadimg/2.png} 형식으로 출력하고 종료
// 단일 파일 업로드일 경우
} else {
copy($_FILES['photo']['tmp_name'], "uploadimg/". $_FILES['photo']['name']);
$arr = array("result" => "success", "img" => "uploadimg/". $_FILES['photo']['name']);
die(json_encode($arr));
}
'php' 카테고리의 다른 글
| PHP SQL 인젝션 공격 대비방법 (0) | 2024.03.26 |
|---|---|
| PHP+Ajax 투표 프로그램 (0) | 2024.03.26 |
| PHP+Ajax+MySQLI(PDO) 아이디 중복체크 (0) | 2024.03.26 |
| PHP cURL 이용하여 JSON 데이터 가져와 활용 (0) | 2024.03.26 |
| PHP curl (0) | 2024.03.26 |
