Form Submitページの移動を防止

13675 ワード
テキストリンク

コミット時にページ移動のコードを開く/閉じる
<!-- 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のパスに移動します.
ページを移動することなく、ファイルをアクションのパスに転送したい場合は、どうすればいいですか?

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()
})
回文連結リスト
パリンドロームですか?