選択したファイルをキャンセル

選択したファイルをキャンセルした時の問題です。

ある編集ページですでに登録されているサムネイルを表示しています。

新しい画像を選択

それをキャンセル

もともと表示していた画像も消えてしまいます。。

キャンセルしたときは、もとの画像（ここでいう1枚目の画像）を表示したいです。

下記が現状のコードです。

html
1<div class="wrap_input">
2  <div class="wrap_file upload">
3    <input id="input_eyecatch" accept="image/*" name="eyecatch" type="file">
4    <div class="file_preview thumb" id="file_preview" style="background: url(eyecatch/img.png)"></div>
5  </div>
6</div>
7
8<script>
9  document.getElementById('input_eyecatch').addEventListener('change', function (e) {
10    // 1枚だけ表示する
11    var file = e.target.files[0];
12    // ファイルのブラウザ上でのURLを取得する
13    if (typeof(file) != "undefined") {
14        var blobUrl = window.URL.createObjectURL(file);
15    }
16    // img要素に表示
17    var $img = document.getElementById('file_preview');
18    $img.style.backgroundImage = 'url('+blobUrl+')';
19  });
20</script>