Home> Internet >  MovableType >  アイテムアップロード途中にプレビューする

アイテムアップロード途中にプレビューする

えーと、アイテムなんですが。アップロードのプロセス内で、一切プレビューとかが無いまま、アイテム挿入まで言っちゃうのってなんか気になりませんか?
私は気になってました。(ファイルダイアログで1つずれて選択したままアップロードして、挿入してから気づくとかドクロ
で、プレビューの表示機能を付けようと、Assetyleneカスタマイズしてみたのですが、どうもこのアイテム挿入の直前ってのもなんか違うような気がして、ファイル選択時にプレビュー表示できないか、試行錯誤をしてみました。

アイテム挿入画面にプレビュー表示

まぁ、Assetylene自体もかなり機能追加されてるけど、それはまた後でということで。

アイテムアップロードのファイル選択じにプレビューを表示する

inputタグのfile値をJSでは取り扱えないらしい

言葉正しいかは不明だけど、チョット説明します。
フォーム側で値を持ってるのだから、fileスキームを指定してjQueryで書きゃあ、割と簡単にできるだろうと思っていたが、どうもうまくいかなかったんですね。「File (URL Scheme)|てくめも@ecoop.net
input type="file"の値を取得すれば、パスが取得出来るものと思っていたんですが、何故か取得した値は純粋にファイル名だけでした。
割と古い情報では、パスが取得出来るようなこと書いてあるのですけどね。

それで調べてみると、どうも最近の(といってもかなり前らしいが)ブラウザでは、セキュリティ対策でブラウザからfileの値をとれなくなっているらしいです。
悪質なJSに勝手にローカルファイルをイジられないようにという事らしい。

バックグラウンドでアップロードするのはイマイチ

どういう方法が存在するか探しまわってみたら、フィールドのonchangeのタイミングで、Ajax使ってバックグラウンドにアップロードを行い、アップロードされたファイルをhttpで読み込むというのがありました。確かにローカルファイルじゃなくなるので、問題はなさそうです。
jQuery.autouploader Pluginを作成しました。 | tech.kayac.com - KAYAC engineers' blog
ただどうも、実サーバーが対象ではないとしても、アップロードをおこなってしまうというのは、どうも納得行かなくて、とりあえず別な方法を探して見ることにしました。

HTML5のlocalStorageを使えないかな

アップロードしなきゃならないなら、localStorageとか言うのあったよね、HTML5に。
と思いついて、調べてみたら、なんとなく出来そうな感じだった。

html5 の canvas + localStorage で画像保存 - 麺処 まつば
[実用HTML5API]ローカル ストレージへの画像のキャッシュ方法 - monoe's blog - Site Home - MSDN Blogs
テキストのみしか扱えないので、画像はBase64に変換するんだ。localStorageへの読み書きはやってみると意外に簡単に扱えるなぁ。ただ、なんかエロい回りくどういなぁという感想。

試していたら、ZemantaがlocalStorageに勝手にデータ保存してて、ちょっとムカッときた。怒り

FileReaderというのがあるようだ

もうちょっと、いい方法がないかと思って、海外のフォーラムなんかも探し回っていたら、コード見つけたので、ソレを試したらイッパツで動いた。意外な結末。

これもFileReader(正しくは「File API」か)というHTML5の機能らしい。
html5のFileReaderでドラッグ&ドロップなファイルのアップロード - end0tknrのkipple - web開発日記
こういうの見ると、HTML5すごいなぁとか思える。

まぁHTML5なんで、きっとブラウザ依存度は高いだろうなと思っていたけど、どうやら現状でコレに対応しているのは、Firefox・Chrome・Operaだけのようでした。Chromeはローカルファイルの扱いはできないとか見かけたんですが、動作してるみたい。
IEとSafariについては動作しませんでした。なので、ブラウザの判別をして対象外の場合は処理の読み込みを行わないようにしています。
File API - HTML5 API チェッカー - HTML5 チュートリアル - HTML5.JP」ここで機能チェックできるっぽいな

出来たかも

元々ファイルアップロードの初期値をカスタマイズするプラグインを作成中だったので、そこに組み込みました。
MTの管理画面って、いつの間にかHTML5になってるんですね。機能が動作するかが気になっていたんだけど、問題なかった。
という訳で、Upload Prefsを暫定公開します。

アップロード前にプレビュー表示

まぁ、他にも機能あるんですけど、作成途中なので、それはそのうちに・・・
一応MT5.13用に作成、といってもMT5.12でも問題なく動くはず。旧バージョン対応は、これからの予定です。
やっぱりアイテムが好き・・・ハート

いけね。嫌な感じダイアログの時忘れてた。収まんねぇや。

ダイアログ表示での暫定処理追加。表示位置は、もうちょっと考える必要あるなぁ。・・・

もろもろケースの修正やって、忘れてたバージョン制限も外して、MT5.12でも動作するようになった。
後は、今要素を置換して書き換えてる関係で、バージョン依存が高いので、DOM挿入型に書き換える予定。
それからひと通り終わったら、2バイト文字の制限を追加するかな。

Comment:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://www.zelazny.mydns.jp/cgi-bin/MT/mt-tb.cgi/2273

Home> Internet >  MovableType >  アイテムアップロード途中にプレビューする

CC Licence

Creative Commons License

このブログはクリエイティブ・コモンズでライセンスされています。

Feeds

Return to page top