今までは、Ajax（非同期）でのファイルアップロードは
iframeを使うなど、少しトリッキーな方法を用いる必要があり、
とても面倒でしたが、『XMLHttpRequest Level2』からは『FormData』というものへ
オブジェクト化すればファイルもサーバーへアップロード出来る様になりました。

しかし『Firefox 3.6』辺りでは上手く動作しない等の報告もあり、
使用に躊躇していましたが、最近の『Firefox』の強制アップデートにより、
古い『Firefox』は駆逐されたかと思いますので、
今回の記事にて、フォームを利用したAjax（非同期）でのファイルアップロード方法について
サンプルコード付きで解説します。

更に、サンプルコードは私が普段使用しているものを分かりやすく纏めたものです。
機能としては、単純なAjax（非同期）処理と、送信先や送信方式等は
送信対象のフォームを解析し、自動的にセット。

送信に対する結果通知は、コールバックを指定するという方式を取り、
汎用的に使いまわせる様にユーザ定義関数として再編しています。

主に、フォームの『submit』の代わりにお使い頂けます。

それでは早速解説に入りましょう。

1. コピペでOK！ファイルアップロード対応付Ajax通信
2. Ajax通信に必要な要素の初期化
3. ファイルアップロード対応のAjax通信用データをフォームから自動取得して成型
4. Ajax通信を実行し、返却値を受け取ろう！結果と共にコールバック起動
5. フォームデータをAjax通信にて送信する方法

『【Ajax｜非同期】ファイルアップロード対応！フォーム自動解析送信』を続きを読む »

要素自体の点滅を指定回数分繰り返しアニメーションを行う方法や、
フォーム等の要素において、枠の部分の影を滑らかに表示・非表示させるアニメーションの
実装方法をサンプルコードを交えて解説します。

JavaScript部分の実装では、ネイティブなJavaScriptに加え、jQueryを使用した
記述もあります。

サンプルはユーザ定義関数として実装されていますので、
そのままコピペで使うか、ご自身のライブラリに組み込む等してお使い下さい。

1. 要素自体を指定回数点滅させよう
2. テキストフォーム等の枠（輪郭部分）を点滅させよう

『フォームの枠や要素自体を滑らかに点滅！指定数繰り返し行う方法』を続きを読む »

インジケータを回して何かを作業中に画面操作を防止する時や、
ポップアップを表示させる時などに使用するグレーアウト方法と、
グレーアウト上に表示するポップアップやインジケーター。
その他、作業領域等を表示させる方法をサンプルコードと共に解説します。

主に、JavaScript部分ではjQueryを使用し、HTMLとCSSを操作して実現させます。
それでは早速、次章より具体的な実装方法について解説します。

1. グレーアウト用の半透明パネルを予め用意しておこう
2. グレーアウトを表示させよう
3. グレーアウトを終了させよう

『【jQuery】グレーアウトさせてポップアップを出す方法！』を続きを読む »