IE8対応の画像アップローダを実装

最近インターンでは企業向けのWebアプリを実装していて、IE8対応の縛りプレイを受けています。その実装過程で味わった苦しみを忘れないよう、ここに記録しておきます。今回実装したのは画像のアップロード機能です。

要件

以下の2点を満たす必要がありました。

・アップロード前にサムネイルを確認できること

・画像をクロッピング(切り抜き)できること

 

問題点

1.FILE APIが使えない

ローカルファイルを参照できないのでアップロード前にサムネイルを確認することができません。ならば一旦サーバに送ってBase64でレスポンスを返してもらおう。。。ajaxで画像を送受信だ!

 

2.FormDataが使えない

 ajaxも使えないじゃん!

どうやらiframeを使って同じことができるらしい...?

 

解決策 

まさしくこれでした。

 

画像を送るformのtargetに隠しiframeを設定することで、レスポンスが隠しiframeに返ってきてajaxっぽいことができるというカラクリでした。ほんでサムネイルは隠してたiframeの中に表示すればよし。

 

画像をクロッピングに関しては icropperというJavaScriptライブラリがありました。IE8対応してるライブラリが少なくて見つけるのに時間かかった...。

 

GitHub - supnate/icropper: Javascript Image Cropper

 

モダンブラウザなら cropper.jsというイケてるライブラリが使える。いいなぁ。

 

 地味に詰まったところ

formタグに enctype="multipart/form-data" を付けないとファイルが送信されない。送られてきたパラメータ見たらファイル名の文字列しか入ってなくて最初困惑した。

 

なんとかなった

普段はモダンなブラウザ向けにコードを書くことが多いので意識したことがなかったのですが、下位互換性を保つのは非常に骨が折れますねえ。世界中のエンジニアたちが”IEは早く滅びろ”と口を揃えて言っている意味が分かりました。

 

ほんとIE滅びてくれ〜〜〜っ