作品 ID: 735

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

公開

ファイルリーダープラグインのテスト。ローカルにある画像、テキスト、オーディオファイルをファイル選択ダイアログを出してよみこむ。ドラッグ＆ドロップでも読み込めます／テキストで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)からの経過ミリ秒数）

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

作品について

作品情報

作品を編集

雪乃☆雫作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: -
利用バージョン: 3.6.23
アクセス数(累計): 9
アクセス数(今月): 9
更新日時: 2021/09/11 11:39 編集: 2024/10/19 14:36

⭐⭐⭐

作品公開情報

交流

コメントを取得中...