ローカルのファイルを読み込みたい！

ファイルリーダープラグインのテスト。ローカルにある画像、テキスト、オーディオファイルをファイル選択ダイアログを出してよみこむ。ドラッグ＆ドロップでも読み込めます／テキストでcsvとtsvも取得できるようにしました。／ファイル選択した時にはのテスト。なでしこさんを最新に。

文法命令一覧

エディタ

プログラム

!「https://n3s.nadesi.com/plain/nadesiko3-FileReader.js」を取込む。
WINDOWへドロップ禁止。
#-----------------------------------------------------------------------

＃ 画像
DOM親要素に「<IMG id="result"></IMG>」をHTML設定。改行作成。
「☆画像ファイルを選択してください。または、キャンバスにドロップしてください。」のラベル作成。改行作成。
ファイル選択作成して画像ファイル選択に代入。
　画像ファイル選択の「accept」に『image/*』をDOM属性設定。　//固有ファイル型指定子
//　画像ファイル選択の「multiple」に、はいをDOM属性設定。　 //複数選択出来るようにする
　画像ファイル選択でファイル選択した時には、
　　　選択画像取得。
　ここまで。
改行作成。改行作成。

「#nako3_canvas」にファイルドロップした時には、
　　画像ファイル選択["files"]＝対象。
　　選択画像取得。
ここまで。

●選択画像取得
　選択ファイルリスト＝画像ファイル選択["files"]。
　ファイル＝選択ファイルリスト[0]

ファイル["name"]を表示。　//ファイル名（パス無し）
　ファイル["size"]&「バイト」を表示。　//ファイルサイズ（バイト）
　ファイル["type"]を表示。　//ファイルタイプ（image/jpegとか）
　(ファイル["lastModified"]/1000)を日時変換して表示。　//最終更新時刻（UTC(1970/1/1)からの経過ミリ秒数）

ファイルの画像ファイル開いた時には
　　　　img＝対象。
　　　「#result」の「src」にimg["src"]をDOM属性設定。
　　　　h＝img["height"]/(img["width"]/300)
　　　　[0,0,300,h]にimgを画像描画。
　ここまで。
ここまで。

＃ テキスト
改行作成。
空のテキストエリア作成して取得テキストに代入。改行作成。改行作成。
　取得テキストの「幅」に「90%」をDOMスタイル設定。
　取得テキストの「高さ」に「150px」をDOMスタイル設定。
「☆テキストファイルを選択してください。または、テキストエリアにドロップしてください。」のラベル作成。改行作成。
ファイル選択作成してテキストファイル選択に代入。
　テキストファイル選択の「accept」に「.txt,.csv,.tsv」をDOM属性設定。
　テキストファイル選択でファイル選択した時には、
　　　選択テキスト取得。
　ここまで。
改行作成。
「Shift_JIS」のチェックボックス作成して、文字コードチェックに代入。
改行作成。改行作成。改行作成。

取得テキストへファイルドロップした時には、
　　テキストファイル選択["files"]＝対象。
　　選択テキスト取得。
ここまで。

●選択テキスト取得
　選択ファイルリスト＝テキストファイル選択["files"]
　ファイル＝選択ファイルリスト[0]
　ファイル["name"]を表示　//ファイル名（パス無し）
　ファイル["size"]&「バイト」を表示　//ファイルサイズ（バイト）
　ファイル["type"]を表示　//ファイルタイプ（text/plainとか）
　(ファイル["lastModified"]/1000)を日時変換して表示。　//最終更新時刻（UTC(1970/1/1)からの経過ミリ秒数）

文字コード＝空。//空はUTF-8
　もし、(文字コードチェックの「checked」をDOM属性取得)＝はいならば、文字コードは「Shift_JIS」
　文字コードでファイルのテキストファイル開いた時には、
　　　取得テキストに対象をテキスト設定。
　ここまで。
ここまで。

＃ オーディオ
「☆オーディオファイルを選択してください。」のラベル作成。改行作成。
音＝空。
ファイル選択作成してオーディオファイル選択に代入。
　オーディオファイル選択の「accept」に「.mp3,.m4a,.aac,.wav,.flac」をDOM属性設定。
　オーディオファイル選択でファイル選択した時には、
　　　選択オーディオ取得。
　ここまで。
改行作成。
「再生」のボタン作成して再生ボタンに代入。
「停止」のボタン作成して停止ボタンに代入。
再生ボタンをクリックした時には、
　音をオーディオ再生。
ここまで。
停止ボタンをクリックした時には、
　音をオーディオ停止。
ここまで。

●選択オーディオ取得
　選択ファイルリスト＝オーディオファイル選択["files"]
　ファイル＝選択ファイルリスト[0]。
　ファイル["name"]を表示　//ファイル名（パス無し）
　ファイル["size"]&「バイト」を表示　//ファイルサイズ（バイト）
　ファイル["type"]を表示　//ファイルタイプ（audio/mpegとか）
　(ファイル["lastModified"]/1000)を日時変換して表示。　//最終更新時刻（UTC(1970/1/1)からの経過ミリ秒数）

ファイルのオーディオファイル開いた時には、
　　　音＝対象。
　ここまで。
ここまで。

実行結果

保存

プログラムを保存

表示ページ

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

実行環境

なでしこバージョン

素材

画像・音声・データ

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

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ