【JavaScript】ファイル読み込み実験！
どうも！LSSです！！
今回はファイル読み込みの実験です。
テキストファイル読み込み、画像ファイル読み込みを行う処理を極力シンプルに書いてみます。
…実験段階で書いてるので、いつも以上に訳の分からない記事となっておりますｗ
テキストファイル読み込みテスト
サンプル
コード
<p><input id="ftxt" accept="text/*,.svg,.csv" type="file" /></p>
<div id="gtxt"> </div>
<script>// <![CDATA[
rdt=new FileReader();
ftxt.addEventListener('change',ftxtch,false);
rdt.addEventListener('load',rdtld,false);
function ftxtch(e){
rdt.readAsText(ftxt.files[0]);
}
function rdtld(e){
txt=rdt.result;
txt=txt.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br/>');
gtxt.innerHTML=txt;
}
// ]]></script>
コード解説
HTML部分は、
<p><input id="ftxt" accept="text/*,.svg,.csv" type="file" /></p>
<div id="gtxt"> </div>
の２行のみ。
ファイル読み込みのinputタグと、結果出力用のdivを用意しているだけです。
accept="text/*"
を入れておくと、読み込むファイルがテキストファイルに限定されますが（拡張子で判別されています）、内容的にはテキストファイルであるcsvやsvgも対象にしたいので
と、カンマ区切りで付け足しています。
<script>内では関数を２つ置いていますが、ページを開いた時に実行される部分は
rdt=new FileReader();
ftxt.addEventListener('change',ftxtch,false);
rdt.addEventListener('load',rdtld,false);
の３行のみ。
rdtという任意の名前で、ファイル読み込みオブジェクトを生成。
ftxtと任意のidをつけたinputタグに変更（change）が行われた時に、ftxtch関数を呼び出すイベントリスナーで監視。
rdtと任意の名前をつけたファイル読み込みオブジェクトが読み込み完了（load）した時に、rdtld関数を呼び出すイベントリスナーで監視。
…という事をやっています。
function ftxtch(e){
rdt.readAsText(ftxt.files[0]);
}
inputタグに変更が生じた時に呼び出される、ftxtch関数の中では、rdt（ファイル読み込みオブジェクト）にinputタグで選択されたファイルを読み込むように指示を出しています。
読み込み処理は非同期で行われるため、ここではそれだけで処理完了。
function rdtld(e){
txt=rdt.result;
txt=txt.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br/>');
gtxt.innerHTML=txt;
}
読み込み完了時に呼び出される、rdtld関数。
まず、変数txtに、rdt.result（ファイル読み込み結果の内容で、この場合テキストファイルの中に書かれた文字列）を代入しています。
txt=txt.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/\n/g,'<br/>');
そしてその結果確認のために画面上に内容を出力するのですが、HTMLタグと判定されるような記号が入っていた時のために、複数のreplaceをかけてタグ無効化処理を行っています。
「&を&に置き換え、<を<に置き換え、>を>に置き換え、改行を<br/>に置き換え」の順で処理しています。
処理してから、それを、
gtxt.innerHTML=txt;
で画面に打ち出しておしまい、ですね。
画像ファイル読み込みテスト
サンプル
コード
<p><input id="fimg" accept="image/*" type="file" /></p>
<p><img id="gimg" /></p>
<script>// <![CDATA[
rdi=new FileReader();
fimg.addEventListener('change',fimgch,false);
rdi.addEventListener('load',rdild,false);
function fimgch(e){
rdi.readAsDataURL(fimg.files[0]);
}
function rdild(e){
gimg.src=rdi.result;
}
// ]]></script>
コード解説
大筋でやっている事はテキストファイルの時と同じです。
相違点を上げていくと、
<p><input id="fimg" accept="image/*" type="file" /></p>
<p><img id="gimg" /></p>
読み込みファイルを画像ファイルに限定するために、
accept="image/*"
としています。
また、結果確認を行うのをdivタグではなくimgタグにしています。
srcを指定していないので、この時点では何も表示されません。
inputタグに変更が生じた（ファイルが選択された）時の関数内で、
rdi.readAsDataURL(fimg.files[0]);
としています。
これが、テキストファイルの時は readAsText でした。
そして、非同期で行われるファイル読み込みが完了した時に呼ばれる関数内では、
gimg.src=rdi.result;
とするだけで、gimgという任意のidをつけたimgタグに、読み込んだ画像ファイルの画像がそのままセットされる、というのがreadAsDataURLの恩恵っぽいです^^
とりあえず、読み込み方だけ分かった感じ
それで、例えばsvgファイルなんかだと「テキストファイルとしても画像ファイルとしても」読み込んで開く事ができます。
が、「読み込んだsvgファイルをテキストファイルとしての変更を加えたものを、画像ファイルとして扱う」などになると、どうやら Blob とかいうよく分からないものをさらに扱う必要が出てくるようです^^;
それもできるようになれば…
「黒い線で描かれたsvgファイルひとつを読み込ませるだけで、色違いのsvgファイルを生成、さらにそれらをpngに変換したものを生成、それらを一気にダウンロード保存」
なんて事までできそうです！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
