Home > 技術全般 > 補足 画面遷移なしでファイルアップロードする方法

補足 画面遷移なしでファイルアップロードする方法

画面遷移なしでファイルアップロードする方法というエントリーのアクセス数が多いわけですが、自分でこの方法を使ったときに少し悩んだことがあるので補足。

この方法は、画像をアップロードした瞬間に即座にデータを確定するときにはそのまま使えるが、画像とコメントなどを同時に編集して、次の画面でデータ確認やデータ登録完了させようとすると問題がある。
戻る対応をしていないので、確認画面や完了画面から戻るボタンで戻ると、アップロードした画像が消えてしまうから。

例えば私が嫁ブログ画像アップロードの仕組みを検討していたときは以下のようなことをやりたいと思っていた。

  • 画像とコメントを簡単に登録できる仕組みにしたい
  • 複雑な遷移は操作が難しいので1画面内で画像をアップロードしてコメントを入力できるようにしたい
  • 画像をアップロードするたびに画面遷移させるのはやめたい

上記を実現するためには、画像をアップロードした時点でデータを確定してはいけないわけで、それはあくまで編集中の情報のはず。バリデーションなどは投稿ボタンを押した段階で実施したい。
ただし、画像をいちいちアップロードするときに戻るボタン対応するのも大変そう。(どうやればいいのかすら分からない)
というわけで、大まかに以下のような実装をした。

■画像アップロードボタン押下の動作
1.画像アップロードボタンを押すとiframeをターゲットにしてPOST
2.tmpディレクトリに画像を保存し、結果を返す
3.画像を画面に表示すると同時に、投稿formにtmpファイル名を保存したhidden項目を追加する
※ 「画面遷移なしでファイルアップロードする方法」に書いたのとほぼ同じ
※ hiddenにファイル情報を保存することで、その他のデータと同時にsubmitできるようにする

■画像削除ボタン押下の動作
1.ajaxでPOSTする
2.サーバーのtmpファイル削除し、結果をJSONで返す
3.画面の画像表示とhidden項目を削除

■投稿ボタン押下
1.ajaxでPOSTする
2.入力チェック、画像存在チェック、tmp⇒正規ディレクトリへ画像移動、DB登録、結果をJSONで返す
3.JSONでエラーが返ってきたら、その旨Javascriptで画面に表示する
4.JSONで正常完了情報が返ってきたら、Javascriptで登録完了画面に遷移させる

■その他
1.画像のtmpディレクトリに残ってしまうゴミは、お掃除バッチで削除する
※ たいした利用数ではないので、実際にはたまに手で消しているんだけど。。。

例えばブログなどで、画像をアップロードする画面とエントリーを記入する画面が別々なのは、初心者には難しい様子。ということで簡単に編集できるようなツールを作ろうと思ったんだけど、思ったよりも実装に手間取ってしまった。
とりあえず動いたから良かった。

Comments:0

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://blog.joyfullife.jp/archives/2007/07/18115458.php/trackback
Listed below are links to weblogs that reference
補足 画面遷移なしでファイルアップロードする方法 from 30からのBlog
pingback from 画面遷移なしでファイルアップロードする方法 - 30からのBlog 09-01-16 (金) 2:18

[...] 補足 画面遷移なしでファイルアップロードする方法 [...]

Home > 技術全般 > 補足 画面遷移なしでファイルアップロードする方法

Search
Feeds
Meta

Return to page top