JavaScriptで入力フォームからファイルを送信する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで入力フォームからファイルを送信する方法について現役エンジニアが解説しています。入力フォームでファイルを送信するには、input要素のtype属性を使います。JavaScriptで要素オブジェクトを取得してsubmitイベントでPOST送信します。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
JavaScriptで入力フォームからファイルを送信する方法について解説します。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプフロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptで入力フォームからファイルを送信する方法について詳しく説明していくね！
お願いします！
input要素とは
HTMLを構成する要素のひとつです。主にユーザーが入力するテキストボックスや選択するセレクトボックスなどを作成するのに使用します。
「type」という属性を変更することで10種類の部品を作成することができます。
input要素のtype=”file”の書き方
inputタグの基本的な構文は、以下になります。
<input type="属性" name="タグ名" value="値">
file属性を付与してファイル送信用のタグにするには、以下のようになります。
<input type="file" name="file_tag" value="ファイル選択">
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
JavaScriptでの入力フォームからのサーバーへのファイル送信
JavaScriptで入力フォームのファイル情報をサーバへ送るためにはinput fileで取得したファイル情報のオブジェクトを取得してsubmitイベントを実行してサーバーへ送信します。
実際に書いてみよう
HTMLと送信をするJavaScriptの部分を記載していきます。
HTML
<html> <head> <title>JavaScriptでファイルをサーバに送信する</title> </head> <body> <form id="formfile"> <div>File-01<input name="File01" type="file" /></div> <a href="javascript:void(0);" onclick="ExecUpload();">アップロード</a> </form> </body> </html>
JavaScript
function ExecUpload() {
var formObj = document.getElementById("formfile")
var data = new FormData(formObj);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
xmlhttp.open("POST", "GetForm03.ashx", true);
xmlhttp.send(data);
}
筆者プロフィール
| 水野大輝（みずのたいき）
2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
