Blog

JavaScriptで拡張子のない画像のファイルの種類を判別する方法(IE9以上)

2015.09.29Cat:javascript デザイナー

サーバーで出力された画像などで、拡張子がない場合に、

IE10以上のモダンブラウザでは、

HTML5のFileAPIを使うことで、画像ファイルの種類を判別することができます。

しかし、2015年現在でもそれなりにシェアがあり、コーディングのときに対応を求められるIE9は、

FileAPIに対応しておらず、

拡張子のない画像ファイルの種類の判別には、別の方法を使う必要があります。

 

Javascriptでバイナリデータを取得する|社員ブログ|株式会社Qript

↑こちらで、その方法について紹介されていましたので、

実際にやってみました。

 

↓こちらが作ってみたもの

DEMO

 

方法

その方法とは、

Ajaxによりバイナリデータとして画像を読み込み、

先頭に含まれるファイル形式特有のデータを読み取り、

判別するというものです。

ファイル形式 先頭 末尾
JPEG FF D8 FF D9
PNG 89 50 4E 47
GIF 47 49 46 38

(http://www.qript.co.jp/blog/technique/215/ より引用)

 

画像ファイル形式を判定するJavaScriptコード

紹介いただいていた方法だと、IE9では

XMLHttpRequestのresponseTypeが”arraybuffer”に対応していないため、

以下のコードが効きません。

そのため調べてみたところ、

IE9でXMLHttpRequestを使ってバイナリファイルを読み込むやつ · GitHub

↑こちらで紹介されている方法で場合分けすることで、IE9にも対応できました。

 

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ