Edited at

HTML5 File APIを使用しローカルファイルを読み込む簡単なサンプル

More than 3 years have passed since last update.


HTML5 File APIとは

今までセキュリティ上、ローカルファイルにアクセスできなかったが、HTML5から「File API」というのを使用し、ローカルファイルを読み込むことができるようになった。


サンプルと解説

画像ファイルを選択すると、その画像ファイルをプレビューだけするサンプル。

今まで、サーバーに画像をアップしないとできなかったことが、HTML + JavaScriptだけで完結できる。

これにより、HTML5のアプリケーションの幅が広がる。

また、SNSサイトなどでアイコン画像を、サーバーにアップする前にプレビューするときなどに使用される。

※キャンセルさせる画像は、わざわざサーバーにアップされないメリットがある


HTML

<input type="file" id="files" name="files[]">

<output></output>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


JavaScript

$(function(){

// --------------------------------------------------------
// 関数定義
// --------------------------------------------------------
function handleFileSelect(evt) {
var files = evt.target.files; // inputタグからFileオブジェクトを取得

// ファイル数分実行
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}

var reader = new FileReader(); // ファイル読み取り用オブジェクト作成

// ファイルを読み時
reader.onload = (function(theFile) {
return function(e) {
// サムネイル用のimgタグ
var $html = ['<img class="photo" src="', e.target.result,'" title="', escape(theFile.name), '">'].join('');

// サムネイルタグを生成
$('output').append($html);
};
})(f);

// データURLにエンコードした内容を格納
reader.readAsDataURL(f);
}
}

// --------------------------------------------------------
// Ready時実行
// --------------------------------------------------------
// File APIのサポートチェックし、ボタンを押した時に実行
if (window.File && window.FileReader && window.FileList && window.Blob) {
$('#files').on('change', handleFileSelect);
} else {
alert('お使いのブラウザはサポートしておりません');
}

});


補足


Fileオブジェクトのプロパティ



  • name : ファイルの名前


  • type : ファイルのMIME/TYPE


  • size : ファイルのサイズ(バイト)


  • urn : ファイルのURN(URL)


参考URL