どうも！LSSです！！
最近、
【CSS】チェックボックスの代わりにラジオボタンでも「:checked」の仕掛けは動作するか実験してみました！【実験】 - Little Strange Software
【HTML】初めてスライダー（<input type="range"/>）を使ってみました - Little Strange Software
【HTML】HTMLタグにカラーピッカーが実装されてた！ - Little Strange Software
などの記事で、様々な<input>タグを試してきました。
今回は…とうとう？一番、扱いが面倒そう？な「type="file"」を試してみます！
ファイル選択ダイアログ
コード
<input type="file" />
この一行のコードを書くだけで、「ファイル選択ダイアログ」が出てきます。
クリックして出てくるファイル選択ダイアログから、ファイルを選択する事もできますし、別途エクスプローラなどで開いたファイル一覧から、ファイルアイコンをドラッグ＆ドロップで入れる事もできます。
ただ、処理を何も書いていないので、「ただ選択できるだけ」なんですが^^;
JavaScriptから利用してみる例
コード
<div id="gamen"> </div>
<p><input id="fl" type="file" /></p>
<script>// <![CDATA[
fl.addEventListener('change',gw,false);
gw();
function gw(e){
txt='name : '+fl.files[0].name+'<br/>';
txt+='size : '+fl.files[0].size+' bytes<br/>';
txt+='MIME : '+fl.files[0].type+'<br/>';
gamen.innerHTML=txt;
}
// ]]></script>
今度は、JavaScriptを併用して「選択したファイルのファイル名・ファイルサイズ・MIMEタイプ」を表示する仕掛けを施してみました。
files[0] を挟まないといけないのが注意点ですね。
とは言え、ここまでは今までに触れてきた<input>タグとあまり大差なく扱う事ができます！
こうなってくるとやりたくなってくるのが
- 画像ファイルを選択
- 画面にそれを表示しながら、拡大縮小・回転・切り抜きなどの処理を行う
- 加工処理を終えたものをダウンロード保存
なんて事ができれば、たまに「448x252ピクセルにした画像をサムネイルとして使用」する手間がだいぶ省けそう！
なんですが、ここで選択したファイルをJavaScriptから再利用するのは、例えばただ画像として表示させるだけでも、また別の面倒そう～な処理を入れないといけないっぽいです^^;
そのあたりはまた、おいおい…やるかやらないか分かりませんがｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
