ホーム > カテゴリ > 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