はじめに

JavaScriptでローカルファイルを読み込む場合、同じファイルをもう一度読み込もうとしても、必要なイベントが発火せずファイルを読み込むことができません。これは、その対処方法を検討したメモです。

ローカルファイルの読み込み

以下のプログラムはローカルのテキストファイルを読み込んで、ブラウザ上に表示するだけのサンプルプログラムです。clearボタンは表示しているテキストを消去します。
このChoose Fileボタンを押して適当なテキストファイルを読み込むと、画面上にその内容が表示されます。次にclearボタンでテキストを消去し、もう一度Choose Fileを押して先ほどと同じファイルをオープンしても何も表示されません。もちろん、違うファイルを指定すればきちんと表示されます。
これはブラウザが直前に読んだファイル名を覚えており、同じファイルだとchangeイベントを発火しないようにしているためです。

<!DOCTYPE html>
<html lang="jp">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
    function fileInput(e) {
        for (var i = 0, f; f = e.target.files[i]; i++) {
            if (!f.type.match('text')) continue;

            var reader = new FileReader();

            reader.onload = function(e) {
                var result = document.getElementById('result');
                result.innerText = e.target.result;
            };

            reader.readAsText(f);
        }
    }

    function clearResult() {
        document.getElementById('result').innerText = '';
    }

    window.addEventListener('DOMContentLoaded', function() {
        document.getElementById('fileinput').addEventListener('change', fileInput);
        document.getElementById('clear').addEventListener('click', clearResult);
    });
    </script>
</head>
<body>
    <input type="file" name="fileinput" id="fileinput" value="">
    <input type="button" name="clear" value="clear" id="clear">
    <div id="result"></div>
</body>
</html>

対処方法

直前に読み込んだファイル名を消すことができれば、もう一度同じファイルを読み込めそうです。ただ、changeイベントが発火しないので、上記のコードではそもそもChoose Fileのボタンを押されたことも拾うこともできません。
そこで、ボタンが押されたことを検出するためにclickイベントを使います。clickイベントはchangeイベントより前に起きるので、この中で対処できればchangeイベントも発火しそうです。調べてみるとthis.valueがファイル名を保持しているので、これをnullにします。これで、同じファイルをもう一度読むことができるようになりました。
完成版のコードは以下のとおりです。

<!DOCTYPE html>
<html lang="jp">
<head>
    <title></title>
    <meta charset="UTF-8">
    <script>
    function fileInput(e) {
        for (var i = 0, f; f = e.target.files[i]; i++) {
            if (!f.type.match('text')) continue;

            var reader = new FileReader();

            reader.onload = function(e) {
                var result = document.getElementById('result');
                result.innerText = e.target.result;
            };

            reader.readAsText(f);
        }
    }

    function clearResult() {
        document.getElementById('result').innerText = '';
    }

    // 保持しているファイル名を消す
    function clearFilePath(e) {
        this.value = null;
    }

    window.addEventListener('DOMContentLoaded', function() {
        document.getElementById('fileinput').addEventListener('change', fileInput);
        document.getElementById('fileinput').addEventListener('click', clearFilePath);
        document.getElementById('clear').addEventListener('click', clearResult);
    });
    </script>
</head>
<body>
    <input type="file" name="fileinput" id="fileinput" value="">
    <input type="button" name="clear" value="clear" id="clear">
    <div id="result"></div>
</body>
</html>

終わりに

分かってしまえば簡単なことでしたが、実際のプログラムで起きたので悩んでしまいました。同じファイルは再読み込みしないという仕様は知りませんでした。
上記のコードはosxのsafariとchromeで試しています。

JavaScriptで同じローカルファイルをもう一度読み込む

はじめに

ローカルファイルの読み込み

対処方法

終わりに