▶ 実 行
▶ 実行
クリア
ローカルのファイルを読み込みたい！
by 雪乃☆雫
!「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)からの経過ミリ秒数） ファイルのオーディオファイル開いた時には、 音＝対象。 ここまで。 ここまで。