1

HTMLフォームでファイルを選択時に自動的にSubmitを行うようにJavascriptをつけていますが、送信後完了後にブラウザの戻るボタンを押すと再度onchangeが呼ばれて二重に送信してしまいます。

以下が再現用のテストプログラムです。アップロードするごとに数字が一つ増えるようになっています。

<?php
$logFile = __DIR__ . '/log.txt';
if(file_exists($logFile)){
    $size = filesize($logFile);
} else {
    $size = 0;
}

if(isset($_FILES['upload'])){
    file_put_contents($logFile, "a", FILE_APPEND);
    header('Location: index.php');
    exit;
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <p>Size: <?php echo $size;?></p>
    <form action="" method="post" enctype="multipart/form-data">
        <input type="file" name="upload" onchange="this.form.submit()">
        <input type="submit">
    </form>
    </body>
</html>

この問題が発生するのは Google Chrome(ver48.0 64-bit Mac版で検証) で、Safari と Firefox でテストした時は発生しませんでした。Google Chrome は POST 後、戻るボタンを押すと file に前回のファイルパスがセットされてしまっているように見えます。
onchangeを取り除き、submitボタンで送信するようにするとブラウザに関係なく二重送信は行われませんでした。

可能ならJavascript + HTML側で、不可能ならサーバーサイド側でこの問題を解決するにはどのようにすればいいのでしょうか?

1 件の回答 1

4

a) Documentのパーズ完了前にはsubmitしないようにする。

<input type="file" name="upload" onchange="if (document.readyState != 'loading') this.form.submit();">

b) form 要素に autocomplete=off を付ける。(ページに戻ったときにフォームコントロールの値が保持されなくなります)

<form autocomplete=off action=...>
1
  • a, b の両方とも正しく動作することを確認できました。ありがとうございます。
    – Nuages
    Commented 2016年2月26日 15:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。