勉強したことのメモ

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_logo_unofficial-300x300
JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

mzl.qobqfuxq
GoogleMapでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

javascript_logo_unofficial-300x300
クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...

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

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

jquery_logo
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

javascript_logo_unofficial-300x300
javascriptでブラウザ判別&ページ遷移

var userAgent = window.navigator.userAge ...

images
ImageMagickについて

画像をSSH経由でリサイズする必要があった。 その際に「コンバートがいいよ」とい ...

mzl.qobqfuxq
GoogleMapAPIでヒートマップを表示する方法

GoogleMapAPIで花粉状況や雨量を可視化しやすいようなヒートマップ的なも ...

mzl.qobqfuxq
GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...

javascript_logo_unofficial-300x300
javascriptのtry文

javascriptとかjQueryを使ってて、Firefox,chromeはい ...