ローカルのファイルを読み込むJSプラグイン

File APIを使ってローカルのファイル（画像、テキスト、オーディオ）を読み込むためのプラグイン。ファイル選択のDOM部品(input[type='file'])を作れるようにしました。ドラッグ&ドロップでも読み込めます。／クリアしてもドラッグ＆ドロップのイベントやドロップ禁止の設定が残っちゃうの修正。ダウンロードも出来るようにしました／v3.6でプラグインの仕様が変更になったのへ対応／サンプル：https://n3s.nadesi.com/id.php?735　説明：https://qiita.com/snowdrops89/items/7e9db5d926a1b69783b3

文法命令一覧

エディタ

プログラム

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
　nadesiko3-FileReader.js　v2.0.1

File APIで、ローカルのファイルを読み込むためのプラグイン。
　なでしこv3.6以降への対応。

作者:雪乃☆雫　／　ライセンス:CC0　／　制作時のナデシコバージョン:3.6.23
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
const PluginFileReader = {
  'meta': {
    type: 'const',
    value: { // プラグインに関する情報を指定する
      pluginName: 'nadesiko3-FileReader', // プラグインの名前
      description: 'File APIで、ローカルのファイルを読み込むためのプラグイン', // プラグインの説明
      pluginVersion: '2.0.1', // プラグインのバージョン
      nakoRuntime: ['wnako'], // 対象ランタイム
      nakoVersion: '3.6.2' // 要求なでしこバージョン
    }
  },
  '初期化': {
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
      sys.__stop_list = [];
      sys.__inp_list = [];
      sys.__dom_list = [];
    }
  },
  // @ファイル選択作成
  'ファイル選択作成': { // @ファイル選択(input[type='file'])を作成しDOMオブジェクトを返す // @ふぁいるせんたくさくせい
    type: 'func',
    josi: [],
    pure: false,
    fn: function (sys) {
      const inp = sys.__exec('DOM部品作成', ['input', sys])
      inp.type = 'file'
      return inp
    }
  },
  'ファイル選択時': { // @inputでファイルを選択した時 // @ふぁいるせんたくしたとき
    type: 'func',
    josi: [['と'],['の', 'で']],
    fn: function (fn, inp, sys) {
      if (typeof (inp) === 'string') {inp = document.querySelector(inp)}
      sys.__inp_list.push({inp,fn})
      sys.__file_change = function(e){
        sys.__setSysVar("対象", inp.files)
        sys.__setSysVar("対象イベント", e)
        return fn(e, sys);
      };

inp.addEventListener('change', sys.__file_change);
    }
  },
  // @ドラッグ&ドロップ
  'ファイルドロップ時': { // @DOMにファイルをドロップした時 // @ふぁいるどろっぷしたとき
    type: 'func',
    josi: [['と'],['に', 'へ']],
    fn: function (fn, dom, sys) {
      if (typeof (dom) === 'string') {dom = document.querySelector(dom)}
      sys.__dom_list.push({dom,fn})
      sys.__dom_dragenter = function(e){
        e.stopPropagation();
        e.preventDefault();
      };
      sys.__dom_dragover = function(e){
        e.stopPropagation();
        e.preventDefault();
      };
      sys.__dom_drop = function(e){
        e.stopPropagation();
        e.preventDefault();
        const dt = e.dataTransfer;
        sys.__setSysVar("対象", dt.files)
        sys.__setSysVar("対象イベント", e)
        return fn(e, sys);
      };
      dom.addEventListener('dragenter', sys.__dom_dragenter);
      dom.addEventListener('dragover', sys.__dom_dragover);
      dom.addEventListener('drop', sys.__dom_drop);
    }
  },
  'ドロップ禁止': { // @DOMへのファイルドロップ操作を無効にする // @どろっぷきんし
    type: 'func',
    josi: [['に', 'へ']],
    fn: function (dom, sys) {
      if (typeof (dom) === 'string') {dom = document.querySelector(dom)}
      sys.__stop_list.push(dom)
      sys.__stop_dragover = function(e){
           e.preventDefault();
      };
      sys.__stop_drop = function(e){
           e.preventDefault();
           e.stopPropagation();
      };
      dom.addEventListener('dragover', sys.__stop_dragover, false);
      dom.addEventListener('drop', sys.__stop_drop, false);
    }
  },
  // @ファイル開く
  'テキストファイル追加拡張子': { type: 'const', value: 'csv|tsv|json|js|nako|nako3' }, // @てきすとふぁいるついかかくちょうし
  'テキストファイル開時': { // @ローカルのテキストファイルを開く // @てきすとふぁいるひらいたとき
    type: 'func',
    josi: [['と'],['で'],['の', 'を']],
    fn: function (fn, cha, file, sys) {
      if (!file.type.match('text.*')&& !file.name.match('.+\.('+ sys.__getSysVar('テキストファイル追加拡張子') +')')) {
        console.error("テキストファイル開時：『"+file.name+"』は、テキストファイルではありません。");
        return false;
      }
      const reader = new FileReader();
      reader.readAsText(file, cha);
      reader.onload = function() {
        txt = reader.result
        sys.__setSysVar("対象", txt)
        return fn(txt, sys);
      }
    }
  },
  '画像ファイル開時': { // @ローカルの画像ファイルを開く // @がぞうふぁいるひらいたとき
    type: 'func',
    josi: [['で'],['の', 'を']],
    fn: function (fn, file, sys) {
      if (!file.type.match('image.*')) {
        console.error("画像ファイル開時：『"+file.name+"』は、画像ファイルではありません。");
        return false;
      }
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function() {
        const img = new window.Image()
        img.src = reader.result
        sys.__setSysVar("対象", img)
        img.onload = function() {
          return fn(img, sys);
        }
      }
    }
  },
  'オーディオファイル開時': { // @ローカルのオーディオファイルを開く // @おーでぃおふぁいるひらいたとき
    type: 'func',
    josi: [['で'],['の', 'を']],
    fn: function (fn, file, sys) {
      if (!file.type.match('audio.*')) {
        console.error("オーディオファイル開時：『"+file.name+"』は、オーディオファイルではありません。");
        return false;
      }
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function() {
        const audio = new Audio()
        audio.pause()
        audio.src = reader.result;
        sys.__setSysVar("対象", audio)
        return fn(audio, sys);
      }
    }
  },
  'データファイル開時': { // @ローカルのデータファイルを開く // @でーたふぁいるひらいたとき
    type: 'func',
    josi: [['で'],['の', 'を']],
    fn: function (fn, file, sys) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function() {
        const data = reader.result;
        sys.__setSysVar("対象", data)
        return fn(data, sys);
      }
    }
  },
  // @ダウンロード
  'テキストダウンロード': { // @文字列(text)をファイル名(name)でダウンロードする // @てきすとだうんろーど
    type: 'func',
    josi: [['を'],['で','へ','に']],
    pure: true,
    fn: function (text, name, sys) {
      const blob = sys.__exec('BLOB作成', [text, {"type":"text/plain"}, sys]);
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.download = name;
      a.href = url;
      a.click();
      window.URL.revokeObjectURL(url);
      return true
    }
  },
  'JPGダウンロード': { // @描画中キャンバスをファイル名(name)で品質(0～1)のJPG形式にてダウンロードする。 // @JPGだうんろーど
    type: 'func',
    josi: [['で','へ','に'],['の']],
    pure: true,
    fn: function (name, q, sys) {
      const cv = sys.__getSysVar("描画中キャンバス");
      const a = document.createElement('a');
      a.download = name;
      a.href = cv.toDataURL('image/jpeg',q);
      a.click();
      return true
    }
  },
  'PNGダウンロード': { // @描画中キャンバスをファイル名(name)でPNG形式にてダウンロードする。 // @PNGだうんろーど
    type: 'func',
    josi: [['で','へ','に']],
    pure: true,
    fn: function (name, sys) {
      const cv = sys.__getSysVar("描画中キャンバス");
      const a = document.createElement('a');
      a.download = name;
      a.href = cv.toDataURL();
      a.click();
      return true
    }
  },
  '!クリア': {
    type: 'func',
    josi: [],
    pure: true,
    fn: function (sys) {
    //ドロップ禁止をクリアする
      for (let i = 0; i < sys.__stop_list.length; i++) {
        const dom = sys.__stop_list[i];
        dom.removeEventListener('dragover', sys.__stop_dragover, false);
        dom.removeEventListener('drop', sys.__stop_drop, false);
      };
      //ドラッグ＆ドロップをクリアする
      for (let i = 0; i < sys.__dom_list.length; i++) {
        const dom = sys.__dom_list[i]['dom'];
        const fn = sys.__dom_list[i]['dfn'];
        dom.removeEventListener('dragenter', sys.__dom_dragenter);
        dom.removeEventListener('dragover', sys.__dom_dragover);
        dom.removeEventListener('drop', sys.__dom_drop);
      };
      //ファイル選択時をクリアする
      for (let i = 0; i < sys.__inp_list.length; i++) {
        const inp = sys.__inp_list[i]['inp'];
        const fn = sys.__inp_list[i]['fn'];
        inp.removeEventListener('change', sys.__file_change);
      };
    }
  }
}
// なでしこ3の本体に関数を登録する
if (typeof (navigator) === 'object') {
  navigator.nako3.addPluginObject("PluginFileReader", PluginFileReader)
} else {
  module.exports = PluginFileReader
}

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ