追記@2008/01/10
画像の縦横のサイズが同じ場合に縮小されずに表示されてしまう問題があったため修正しました。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
IE7で動かないことがわかって放置気味だったのですが、せっかく手をつけたのにそのままではもったいない気がしたので、とりあえず形にしました。
Firefox2.0、Opera9.2、IE6、Safari2.0.4で動きます。IE7では動きません。
IEは早くdataスキームに対応していただきたいです。RSSリーダなんかより…
仕組みとしては、、
- imgタグのsrcにfileスキームでローカルファイルを突っ込んで表示できる場合はそのまま表示(IE6)
- 上記がダメだった場合は、iframeに対してファイルをPOSTして、サーバ側でPOSTされたファイルをbase64変換しdataスキームの文字列として返して、クライアント側で表示。
ってことをやってます。画像をbase64変換するサーバ側のコードはPHPで10行くらいです。
この方法だとimgのsrcにfileスキームでローカルファイルを表示できるか、もしくはdataスキームが使えるかのどちらかが出来ないとダメなので、どっちもダメなIE7だとうまく動きません。
IE7でも同じようにしたいとなると、やり方を変えて、、サーバ側で一時的にファイルを保存して、そのファイルにアクセスするためのURLを返すような感じにするしかないかなと思ってます。サーバ側にファイルを一時的に保存させるとなると、手間は格段に上がりますが…
iframeを使って画面遷移無しにファイルアップロードし、サーバ側でなんか処理させて、その結果をJavaScriptとして返してクライアント側で表示を変えるっていう手法って、ファイル内容(画像ファイルに限らず)のプレビューとしていろいろ使えそうな気がしています。
iframeを使ったファイルアップロードの詳しい仕組みは下記が参考になります。
