フロントから画像をアップロード(ajax)

フロントから画像をアップロードさせたい。なるべくならajax式で・・・今や標準ですから。

まともに実装しようものなら、フロント側はjqueryプラグインで済むとして、バックエンドに自前のアップロード機能、および添付ファイルに挿入する機能etcを合わせて、テスト、テスト、またテスト・・・これはしんどい。もっと「サクッと」行かないのか?というニーズが出てきた時のメモ。

1・バックエンドだけはWPのビルトインを借用し、フロントはhtml5とjsで組む。

これは賢い。未確認だが、この記事

IO Domains in Alexa Top 1 Million | techslides.com

によれば、WPのアップロードは、特定のphpファイルに画像データと、nonceデータをPOSTすれば、お返しにJSONでファイルURL含めた各種情報が戻って来るらしい。ちなみに、ファイルデータの送信はhtml5のformdataを利用することになる。

ということはjquery.ajaxを10行くらい書けば実装できそう。
しかし、プログレスバーなど、それなりのインタフェースを付けようと思うと大変だ。

2・例によってプラグイン

安易にしてもっともパワフルな方法。検索してもなかなかふさわしいのが出てこなかった。余計な機能が多かったり。。。

やっと見つけたのがこれ。

Alchemist Ajax Upload
Alchemist Ajax Upload is a wordpress plugin which allows you to upload image in front end.

シンプル。ショートコードでもいいし、テンプレートで使いたかったらdo_shortcodeという話。

クロップとか豪華な機能はないが、ただ画像をアップしたいだけならOK!

hiddenフィールドに画像idが入るので、あとはPOST後にどうにでも処理できる。ユーザープロファイルなんかに良いですね。多分管理画面でも行けると思う。

あとで気づいたが、このプラグインは複数のインスタンスには対応していない。つまり一画面に複数の設置が出来ないようだ。

実は改造も試みたが、PHP側でのインスタンス生成まではうまくいったが、フロント側が面倒そうで断念した。

3・plupload

WPはpluploadというアップロードライブラリを使用している。これがなかなかシンプルで良い。すでにコアは実装されているので、あとはパラメータなどを調べて実装すればイケるはず。

4・jquery_uploadなどで自作

やってみました。なかなか大変だったけど、複数インスタンス、添付ファイル化、指定のフォルダ構造にアップ、何でも出来るようにしました。プラグイン化しましたけど、セキュリティなどが完璧に自信が持てないので公式にアップなどは考えていません。いつの日かGitHubで共有するかも。詳しくはまたの機会に!

コメント

タイトルとURLをコピーしました