今までは、Ajax(非同期)でのファイルアップロードは
iframeを使うなど、少しトリッキーな方法を用いる必要があり、
とても面倒でしたが、『XMLHttpRequest Level2』からは『FormData』というものへ
オブジェクト化すればファイルもサーバーへアップロード出来る様になりました。
しかし『
Firefox 3.6』辺りでは上手く動作しない等の報告もあり、
使用に躊躇していましたが、最近の『
Firefox』の強制アップデートにより、
古い『
Firefox』は駆逐されたかと思いますので、
今回の記事にて、フォームを利用したAjax(非同期)でのファイルアップロード方法について
サンプルコード付きで解説します。
更に、サンプルコードは私が普段使用しているものを分かりやすく纏めたものです。
機能としては、単純なAjax(非同期)処理と、送信先や送信方式等は
送信対象のフォームを解析し、自動的にセット。
送信に対する結果通知は、コールバックを指定するという方式を取り、
汎用的に使いまわせる様にユーザ定義関数として再編しています。
主に、フォームの『submit』の代わりにお使い頂けます。
それでは早速解説に入りましょう。
- コピペでOK!ファイルアップロード対応付Ajax通信
- Ajax通信に必要な要素の初期化
- ファイルアップロード対応のAjax通信用データをフォームから自動取得して成型
- Ajax通信を実行し、返却値を受け取ろう!結果と共にコールバック起動
- フォームデータをAjax通信にて送信する方法
『【Ajax|非同期】ファイルアップロード対応!フォーム自動解析送信』を続きを読む »