[編集モード] ローカルのファイルを読み込みたい！

ローカルにある画像とテキストファイルをファイル選択ダイアログを出してよみこむ。ドラッグ＆ドロップでも読み込めるようにした☆

プログラム: (→大) (→textarea)

!「https://snowdrops89.github.io/nako3_plugin/Plugin_FileReader.js」を取込む。

ファイル＝空。

＃ 画像
DOM親要素に「<IMG id="result"></IMG>」をHTML設定。改行作成。
ファイル選択作成して画像ファイル選択に代入。
　画像ファイル選択の「accept」に『image/*』をDOM属性設定。　//固有ファイル型指定子*/
//　画像ファイル選択の「multiple」に、はいをDOM属性設定。　 //複数選択出来るようにする
　画像ファイル選択の「onchange」に、「選択画像取得」をDOMイベント設定。
改行作成。改行作成。

「#nako3_canvas」にファイルドロップした時には、
　　選択ファイルリスト＝対象。
　　ファイル＝選択ファイルリスト[0]。
　　選択画像表示。
ここまで。

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

●選択画像表示
　ファイル["name"]を表示　//ファイル名（パス無し）
　ファイル["size"]を表示　//ファイルサイズ（バイト）
　ファイル["type"]を表示　//ファイルタイプ（image/jpegとか）
　ファイルの画像ファイル開いた時には
　　　「#result」の「src」に対象["src"]をDOM属性設定。
　　　h＝対象["height"]/(対象["width"]/300)
　　　[0,0,300,h]に対象を画像描画。
　ここまで。
ここまで。

＃ テキスト
空のテキストエリア作成して取得テキストに代入。改行作成。
　取得テキストの「幅」に「300px」をDOMスタイル設定。
　取得テキストの「高さ」に「150px」をDOMスタイル設定。
　取得テキストへファイルドロップした時には、
　　　選択ファイルリスト＝対象。
　　　ファイル＝選択ファイルリスト[0]
　　　選択テキスト表示。
　ここまで。

ファイル選択作成してテキストファイル選択に代入。
　テキストファイル選択の「accept」に「.txt」をDOM属性設定。
　テキストファイル選択の「onchange」に、「選択テキスト取得」をDOMイベント設定。
改行作成。
「Shift_JIS」のチェックボックス作成して、文字コードチェックに代入。

●選択テキスト取得
　選択ファイルリスト＝テキストファイル選択["files"]
　ファイル＝選択ファイルリスト[0]
　選択テキスト表示。
ここまで。

●選択テキスト表示
　ファイル["name"]を表示　//ファイル名（パス無し）
　ファイル["size"]を表示　//ファイルサイズ（バイト）
　ファイル["type"]を表示　//ファイルタイプ（text/plainとか）
　文字コード＝空。//空はUTF-8
　もし、(文字コードチェックの「checked」をDOM属性取得)＝はいならば、文字コードは「Shift_JIS」
　文字コードでファイルのテキストファイル開いた時には、
　　　取得テキストに対象をテキスト設定。
　ここまで。
ここまで。

＃ <input type="file">作成
●ファイル選択作成
　　IDとは変数＝「nadesi-dom-{DOM生成個数}」。
　　DOM生成個数＝DOM生成個数+1。
　　ELとは変数＝「input」のDOM要素作成。
　　ELの「type」に「file」をDOM属性設定。
　　ELの「id」にIDをDOM属性設定。
　　DOM親要素へELをDOM子要素追加。
　　ELで戻る。
ここまで。

キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] ローカルのファイルを読み込みたい！

素材のアップロード