바닐라 ajax 파일업로드 예제
이번에 지인이 이미지(jpg, png, gif) 업로드를 꼭 아작스로 해야 된다고 "발광"을 떨기에 만들어 준 소스입니다.
파일명은 202312252103.jpg 식으로 업로드시의 년월일시분초로 이름이 만들어집니다.
그냥 다 프론트에서 만들고 넘겨서 실제 액션문은 너무 소박하네요.
상단의 오디오는 데이터를 주고 받으면서 스트리밍이 끊기나 아니나를 확인하기 위해 넣은 것이니 삭제해도 됩니다.
오류나 예외처리는 없습니다.ㅜㅠ 본인들이 알아서 넣어주세요.
----------
main.php
[code]
<audio src="https://blog.kakaocdn.net/dn/PmTxy/btsk27xopkC/smpoMRN8VNc0Fim0V05g91/tfile.mp3" controls></audio>
<form id="uploadForm" enctype="multipart/form-data" method="post">
<input type="file" name="upload_file" accept=".jpg,.png,.gif">
<input type="hidden" name="upload_file_name">
</form>
<button type="button" id="uploadButton" style="cursor:pointer">업로드</button>
<div id="ajaxDiv"></div>
<script>
actionUrl = "./upload.php";
uploadDirectory = "./";
function todayData() {
today = new Date();
mdhmsToday = ["Month", "Date", "Hours", "Minutes", "Seconds"];
ymdhmsToday = today.getFullYear();
for (i of mdhmsToday) ymdhmsToday += ("0" + (today["get" + i]() + (i == "Month" ? 1 : 0))).slice(-2);
return ymdhmsToday;
}
document.querySelector("#uploadForm").onchange = function() {
fileName = todayData();
fileExtension = this.querySelectorAll("input")[0].value.slice(-4).toLowerCase();
imageSrc = this.querySelectorAll("input")[1].value = uploadDirectory + fileName + fileExtension;
}
function ajaxUpload() {
uploadData = new FormData(document.querySelector("#uploadForm"));
ajax = new XMLHttpRequest();
ajax.open("post", actionUrl);
ajax.onload = () => {
document.querySelector("#ajaxDiv").innerHTML = "<img src='" + imageSrc + "'>";
}
ajax.send(uploadData);
}
document.querySelector("#uploadButton").onclick = ajaxUpload;
</script>
[/code]
----------
upload.php
[code]
<?php
move_uploaded_file($_FILES['upload_file']['tmp_name'], $_POST['upload_file_name']);
[/code]