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

2017/11/1

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

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

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

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

１．FILE APIが使えない

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

２．FormDataが使えない

ajaxも使えないじゃん！

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

まさしくこれでした。

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

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

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

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

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

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