勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

Ajaxでプラグイン無しのファイルアップロード

   

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかった。いつもであれば適当にjQueryのプラグインを用意して対応していたけど、ちょっと調べるとFormDataオブジェクトというWebAPIを用いることでプラグイン無しでも対応可能だった。サンプルとソースのメモ。

 

サンプルページ

 http://taitan916.info/sample/formdata/

テキストデータと画像をajaxで送信し成功すれば同ページ内にvar_dumpしたデータが表示される。データの保存はしていない。

 

フォームがあるページ

Ajax受取ページ

 

リファレンス

https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects

https://developer.mozilla.org/ja/docs/Web/API/FormData

 

その他

プラグインを用意しなくてよいのは非常にありがたい。ブラウザのバージョンによっては対応していないようなのでその点は注意する。

 - Ajax, JavaScript, 画像

  関連記事

javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

lightboxでCSPエラーが発生

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...

フォルダにリンク制限をかける

imgというフォルダがあり、直接URLを叩いても 中身を見られないけど、同一サー ...

他サーバーにある画像をPHPで取得して保存する方法

他サーバーにある画像をURLで指定して、PHPで取得して保存する方法のメモ。 フ ...

Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

ローディングアイコンの自動生成

オートページャーを作成中にローディングしている アイコンが必要になったのでメモ。 ...

JavaScriptでcookieの保存

JavaScriptでcookieを保存したかったけど 方法が分からなかったので ...

Ajaxのクロスドメイン

クロスドメイン対策にて色々あるみたいだけど 簡単そうで尚且つ実践でも使えたのでメ ...

PHP側での画像最大アップロードサイズの確認

画像がアップロードできず、恐らくサイズ指定にひっかかっているので 最大サイズを調 ...

javascriptで論理和演算子の特殊な使い方

論理和「||」の特殊な使い方を教わったのでメモ。 普段使うのは、 if (a = ...