Formタグを使わずFormDataでシンプルに画像をアップロードする(HTML, JavaScript)

画像アップロード、楽に書けるけど、毎回調べてる… しかも行き着く先はStackOverflow…

何で何だ…

ってことでメモっておく. Form使わないとかけない例が多かったり…

 

以下、JQueryを使ってます. ファイルが選択されたら即座に、アップロードします.
JQueryのajax関数を使ってサーバサイドに画像を送ります.

htmlはだいぶシンプルになりました. まずJQueryとアップロード用のJavaScriptファイルを用意します.

メインのところではinputタグでaccept=”image/*”を書いて画像のみ選択できるようにします.

あとはJavaScriptで

「ファイルが選択されたらAjaxでサーバに送信する」

ってところですね.ここも短く書きました.

$(“#src_img”).changeでファイルが選択されたときの動作を定義しておきます.

FormDataクラスを使って、データを作成します. 適当な名前を1つめの引数に、ファイルの実態を二つ目におきます.他のパラメータもセットできるのでotherで123も送るとかやってみました.色々とお試しください.

そしたらあとはいつものajax!送って終了.

Formで送信する例ばかりが書かれていて、シンプルにinputタグだけで完結しているものが少ない… まぁ大抵はフォームで送信ボタンが押されたら送信が当たり前なのでしょうがないと思いますが…

About the author

Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です