<!-- form.html -->
<!DOCTYPE html>
<html>
<head>
<script src="form.js" defer></script>
</head>
<body>
<h1>파일 업로드</h1>
<form id="file-form"
action="http://localhost:5000/upload"
method="POST"
enctype="multipart/form-data">
<input type="file" name='file' multiple />
<button id="file-submit" type="button">UPLOAD</button>
</form>
</body>
</html>// form.js
const submit_form = document.querySelector("#file-form")
const submit_btn = document.querySelector('#file-submit')
submit_btn.addEventListener('click', function () {
submit_form.submit()
})form 태그를 이용하여 파일을 전송하면 action 의 경로로 이동해 버린다.
페이지 이동없이, 단순히 파일만 action 의 경로로 전송하고 싶을 경우는 어떻게 해야할까?
form 의 target 속성을 이용하여 응답을 iframe 으로 보내버리면 된다.
form 의 target 과 iframe 의 name 을 일치시켜줘야 한다.
iframe 을 적용한 코드이다.
<!-- form.html -->
<!DOCTYPE html>
<html>
<head>
<script src="form.js" defer></script>
</head>
<body>
<h1>파일 업로드</h1>
<form id="file-form"
action="http://localhost:5000/upload"
method="POST"
enctype="multipart/form-data"
target='blankifr'>
<input type="file" name='file' multiple />
<button id="file-submit" type="button">UPLOAD</button>
</form>
</body>
<iframe name='blankifr' style='display:none;'></iframe>
</html>// form.js
const submit_form = document.querySelector("#file-form")
const submit_btn = document.querySelector('#file-submit')
submit_btn.addEventListener('click', function () {
submit_form.submit()
})
틈틈히 공부 홀릭