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

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

プログラム: (→大)

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
　nadesiko3-FileReader.js　v1.2.0

　File APIで、ローカルのファイルを読み込むためのプラグイン。
　ダウンロードもできるようにしました。

　作者:雪乃☆雫　／　ライセンス:CC0　／　制作時のナデシコバージョン:3.4.22
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
const PluginFileReader = {
  '初期化': {
    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.__v0['対象'] = inp.files
        sys.__v0['対象イベント'] = 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.__v0['対象'] = dt.files
        sys.__v0['対象イベント'] = 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.__v0['テキストファイル追加拡張子'] +')')) {
        console.error("テキストファイル開時：『"+file.name+"』は、テキストファイルではありません。");
        return false;
      }
      const reader = new FileReader();
      reader.readAsText(file, cha);
      reader.onload = function() {
        txt = reader.result
        sys.__v0['対象'] = 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.__v0['対象'] = 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.__v0['対象'] = 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.__v0['対象'] = 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.__v0['描画中キャンバス'];
      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.__v0['描画中キャンバス'];
      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
}

⭐ 雪乃☆雫作 (関連URL)
タイトル: ローカルのファイルを読み込むJSプラグイン
ライセンス: CC0 (著作権破棄)
タイプ: js
タグ: -
利用バージョン: 3.4.22
作成日時: 2022/08/22 03:07 (編集: 2023/12/11 11:03)
公開の投稿

⭐ ログインして★を付けよう！

Twitterへ投稿

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

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

作品公開情報