はじめまして、6月入社、新人のクライです。

先日、というか、先程までハマっていたJavaScript関連から、お送りいたします。

HTML5から対応の「FILE API」。これかなり便利です。

このFILE API、指定したローカルファイルのファイル情報やファイルの中身（データ）をJavaScriptで取得できます。

たとえば、画像のプレビューのコードはこんな感じです。

 

//[HTML側]
//ファイルタグ
//画像表示するところ

//[JS側]
//画像プレビューだよ！ 
$(document).ready(function(){ jQuery.event.props.push("dataTransfer");
$("#input_file").change(function(){ 
var file = this.files[0];
viewFileContent(file); });
function viewFileContent(file){
if(!window.FileReader){
return;
}
if(file.type.match(/image/)){
var fr = new FileReader()
fr.onload = function(event){
var image_add = $("

").attr("src", event.target.result);
$("#pic_wakuwaku").html(image_add);
};
fr.readAsDataURL(file);
}
}
});

 

と、超簡単に、プレビュー表示されます。

※これを同じ動きをasp/VBScript/JavaScriptで実装するとなると、とても手間でした。なんとかその部分は出来ましたが。

また、容量（KB）やファイル名、ファイルの種類も簡単に取得できます。

しかし、HTML5からの対応の為、IE9やOPERA10.6等のブラウザでは、FILEオブジェクトが生成されません。

画像のプレビューや簡単な情報をブラウザから取得したい場合には、かなり使えると思います。

これからHTML5が普及していく中で見かける場面も増えてくるのではないでしょうか。

詳しくは、以下のリンクへどうぞ。

「FILE API」参考リンク：http://ascii.jp/elem/000/000/559/559105/