22574


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

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

[code]

    <?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>
    
[/code]

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

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


CC BY-SA 3.0
2016-02-26T08:57:36.057
22568
2016-02-26T14:22:14.393
10083
question
javascript php
Formでファイル選択時にonchangeを利用してsubmitした後、戻るボタンを押すと再送信されてしまう


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

[code]

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

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

[code]

    <form autocomplete=off action=...>
    
[/code]


CC BY-SA 3.0
2016-02-26T14:22:14.393
22574
2016-02-26T14:22:14.393
3475
22568
answer