Form Submit 페이지 이동 방지

submit 시, 페이지가 이동하는 코드 열기/닫기 
<!-- 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()
})
C 언어의 과학 계수 법 에 관 한 문제.
spring 주해 소스 코드 분석 - 주해 설정 자원 분석 및 주입

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage