FileAPIを使ってJavaScriptでファイルの情報を読取る方法


こんにちは、ふじーにょ(@fujinyo)です。
FileAPIを使う事によって、JavaScriptでローカルファイルが扱えます。

読み込み、書き込み、フォルダやファイルの作成までできます。
今回はファイルの情報を読み取ってみます。

まずは、FileAPIが利用できるかチェック
Looking Over The FilesLooking Over The Files / JD Hancock

まず、ブラウザがFileAPIに対応しているのかどうかチェックする必要があります。
僕もChrome v23,FireFox v16,IE v9,Opera v12(すべてWindows環境)でチェックしましたが、IEのみダメでした。

チェックは以下のように行います。

if( window.File )
{
 alert('FileAPIが使えます');
}
else
{
 alert('FileAPIが使えません');
}
ファイルのサイズや名前を取得してみる

次に、ファイルの名前やサイズ、種類を取得してみましょう。
まず、HTMLにファイル選択ボックスを作ります。

<input type="file" id="testfile" />

受け取ったファイルをJavaScriptで参照します。

var test_file = document.getElementById("testfile").files[0];

//ファイル名を表示
alert(test_file.name);

//ファイルサイズを表示(バイト数)
alert(test_file.size);

//ファイルの種類
alert(test_file.type);

簡単ですね。
ファイルをアップロードさせる前のチェックに使ったりできますね。

では、また。

参考 : File APIでブラウザーからローカルファイルを操作

[PR] 「結さん」があなたに代わって開発案件の依頼主を探します

  • 「既存のクライアントにギャラアップは言いにくい」
  • 「営業活動する時間がないし、苦手」
  • 「仕事が途切れたらどうしよう」

ITエンジニアのこんな悩みを「結さん」が解決してくれます
結さんへの無料会員登録後は提案メールを待つだけです!

関連記事