바닐라 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]