勉強したことのメモ

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, 画像

  関連記事

images
画像登録用のfunction

<?php /****** 画像アップロード用function 画像送付側 ...

jquery_logo
Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...

javascript_logo_unofficial-300x300
JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

javascript_logo_unofficial-300x300
JavaScriptでURLのクエリを取得する2

直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...

javascript_logo_unofficial-300x300
JavaScriptで特定の範囲内から整数値を、数値が被らずにランダムに取り出す

やりたかったのは1位から20位のランキング内で JavaScriptを用いてラン ...

javascript_logo_unofficial-300x300
JavaScriptで年齢計算

JavaScriptで年齢計算。 ■ソース function ageCalcul ...

javascript_logo_unofficial-300x300
javascriptとPHPで正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...

javascript_logo_unofficial-300x300
javascriptでのエラーログ

PHPでのエラーログ取りが思いのほか便利だったので JSについても簡単にログ取り ...

other
画像拡張子の違いについて

jpg/gif/png画像についてGIFはアニメーションが出来る、 ぐらいの知識 ...

javascript_logo_unofficial-300x300
JavaScriptでAjaxを使わずにクロスドメインから変数を取得する

JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...