jQuery ajax + formData でファイルとデータをアップロードする

  • このエントリーをはてなブックマークに追加
  • Pocket

特にプラグイン等を使わないでajaxでファイルとその他のフォームデータを送信する方法のメモ。

ちなみにこの方法だとIE8では動かないけどな!
(formDataが使えないらしい)

やりたいこと

  • 画像ファイルとちょっとした説明をPOSTする

  • 画面遷移なしでアップした画像と説明を表示する

これを
ajax01

こう
ajax-2

環境

  • jQuery 2.1.4

  • Bootstrap 3

ソース

html フォーム部分

bootstrapなのでちょいと深いよ。

js

php

とりあえず、来たものを返してる形。
バリデーションとかはしっかりやってね。

これで猫さんが画面遷移なしで表示される。

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*