▶ 実 行
▶ 実行
クリア
ローカルのファイルを読み込みたい！
by 雪乃☆雫 (2022/02/15 16:31)
!「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で戻る。 ここまで。