勉強したことのメモ

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

  関連記事

jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

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

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

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

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

prototypeとjqueryの競合

ちょいちょい見るが、実際に競合をおこしているケースに あたったのでメモ。 ↓↓の ...

3Dデータ(obj,stlファイル)をブラウザ上で表示する方法  

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...

lightboxで文字をクリックしたら画像を表示させる

一般的に使われているのはサムネイル画像をクリックすると拡大画像が表示されるという ...

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

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

jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...