ホーム > カテゴリ > HTML5・JavaScript >

指定日付以降に更新されているファイルの一覧を取得する [ブラウザ版]

日付を設定してフォルダを選択すれば自動的に更新されたファイルの一覧表がダウンロードされます。Laravelの方はチェックボックスをオンにします。

※ブラウザはChrome推奨です。
※サーバーにファイルはアップロードされません。
※1万ファイルを超えると数十秒かかります。

ソースコード

30分ぐらいで作ったもので、リファクタリングなどはしていません。

<input type="date" id="dateInput">
<input type="file" id="fileInput" webkitdirectory>
<input type="button" value="クリア" onclick="init();">
<p></p>
<input type="checkbox" value="1" id="laravel"><label for="laravel">vendor/framework/node_modulesが含まれるものは除外する(Laravel用)</label>
<p id="resultCount"></p>
<div id="resultFileinfo"></div>

<script>
var fileInput = document.querySelector('#fileInput');
var dateInput = document.querySelector('#dateInput');
var laravel  = document.querySelector('#laravel');
var resultCount = document.querySelector('#resultCount');
var resultFileinfo  = document.querySelector('#resultFileinfo');

// ファイルのダウンロード
function SaveToFile(FileName,Stream) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(new Blob([Stream], { type: "text/plain" }), FileName);
  } else {
    var a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([Stream], { type: "text/plain" }));
    //a.target   = '_blank';
    a.download = FileName;
    document.body.appendChild(a) //  FireFox specification
    a.click();
    document.body.removeChild(a) //  FireFox specification
  }
}

// 現在日を設定する
function now(){
  var now = new Date();                   
  return now.getFullYear()  + "-" +
         (now.getMonth()+1) + "-" +
          now.getDate();       
}

// クリア
function init(){
  resultCount.innerHTML= '';
  resultFileinfo.innerHTML= '';  
  fileInput.value='';
}

// フォルダ選択
fileInput.addEventListener('change', (event) => {

  var files = event.target.files;
  var select_date = dateInput.value;
  var array  = [];
    
  for (var i = 0; i < files.length; i++) {
   
    // 更新日時の取得
    var dt = new Date(files[i].lastModified); 
    var yyymmddhhiiss = dt.getFullYear() + "/" +
                    ("00" + (dt.getMonth()+1)).slice(-2) + "/" +
                    ("00" + dt.getDate()).slice(-2) + " " +
                    ("00" + dt.getHours()).slice(-2) + ":" +
                    ("00" + dt.getMinutes()).slice(-2) + ":" +
                    ("00" + dt.getSeconds()).slice(-2);
    
    // 指定日付をより大きければ
    if (new Date(select_date).getTime() < new Date(yyymmddhhiiss).getTime()){
      
      // Laravel用の除外
      if (laravel.checked){
        if (files[i].webkitRelativePath.indexOf('vendor') !=  -1){
          continue;  
        }
        if (files[i].webkitRelativePath.indexOf('framework') !=  -1){
          continue;  
        }
        if (files[i].webkitRelativePath.indexOf('node_modules') !=  -1){
          continue;  
        }        
      }
     
      array.push({date:yyymmddhhiiss, name:files[i].webkitRelativePath});
    }
  }
  
  // 日時で降順ソートする  ※ソートしない方が見やすい
  /*
    array.sort(function(a,b){
      if(a.date > b.date) return -1;
      if(a.date < b.date) return 1;
      return 0;
    });
  */

  var msg = '';
  for (var i = 0; i < array.length; i++) {
    // [HTMLで出力する場合]
    // msg = msg + array[i].date + ' ' + array[i].name + '<br>';
    msg = msg + array[i].date + ' ' + array[i].name + "\r\n";
  } 
  
  resultCount.innerHTML= array.length + "件のファイルが見つかりました。";

  if(array.length != 0){
    SaveToFile('list.txt', msg);
  }
  
  // [HTMLで出力する場合]  
  //resultFileinfo.innerHTML= msg;
});

window.onload = (event) => {
  dateInput.value = now();  
};
</script>

Webの標準規格ではないwebkitdirectory、webkitRelativePathを使用していますが、IEとOpera以外は動作すると思われます。Chromeでしか動作確認してませんが(笑)

参考文献 (MDN)

File.webkitRelativePath
HTMLInputElement.webkitDirectory





関連記事


前の記事：Vanilla JS(ピュアのJavaScript)でハンバーガーメニューを作る
次の記事：Error: Module resolve hook not set [FireFox]

公開日：2020年11月18日
記事NO：02859


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)