勉強したことのメモ

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だけでTOPへ戻るリンクの表示

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

110126-HTML5_Logo
formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

images
PHPで画像のフォーマット(拡張子)の変換

画像のアップロードでjpg/png/gif形式を受け付けつつ、 最終的にjpgで ...

javascript_logo_unofficial-300x300
javascriptで実行時間の測定

var time_test = function(){ var x = 1; f ...

javascript_logo_unofficial-300x300
IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...

javascript_logo_unofficial-300x300
javascript:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

jquery_logo
chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

other
アタリ(noimage)画像の自動生成

縦200×横150pxのno-image画像みたいなのが欲しかった。 探すと便利 ...

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

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

jquery_logo
画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...