HTML5のFileオブジェクトを利用したファイルアップロードのコードを紹介します。
概要
こちらの記事では、JavaScriptでXMLHttpRequestとファイル選択ボックスを利用したファイルアップロードのコードを紹介しました。この記事では、HTML5で導入されたファイルオブジェクトを利用してファイルをアップロードするコードを紹介します。
プログラム
コード
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
function ExecUpload() {
var upload1 = document.getElementById("upload1");
var file1 = upload1.files[0];
var formdata = new FormData();
formdata.append("file", file1);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
xmlhttp.open("POST", "GetForm04.ashx", true);
xmlhttp.send(formdata);
}
</script>
</head>
<body>
<div>File-01<input id="upload1" type="file" /></div>
<a href="javascript:void(0);" onclick="ExecUpload();">アップロード</a>
</body>
</html>
ポストされたファイルを受け取る側の実装です。今回はC#のジェネリックハンドラで実装しています。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace FormFileAccept
{
/// <summary>
/// GetForm04 の概要の説明です
/// </summary>
public class GetForm04 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
if (context.Request.HttpMethod == "GET") {
context.Response.ContentType = "text/plain";
context.Response.Write("OK+");
}
else if (context.Request.HttpMethod == "POST") {
HttpPostedFile file01 = context.Request.Files["file"];
string phyPath = context.Server.MapPath("/");
file01.SaveAs(phyPath + System.IO.Path.GetFileName(file01.FileName));
context.Response.ContentType = "text/plain";
context.Response.Write("OK");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
解説
ページの[アップロード]リンクをクリックすると、下記のExecUplaod()関数が呼び出されます。
function ExecUpload() {
var upload1 = document.getElementById("upload1");
var file1 = upload1.files[0];
var formdata = new FormData();
formdata.append("file", file1);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
xmlhttp.open("POST", "GetForm04.ashx", true);
xmlhttp.send(formdata);
}
以下のコードでは、getElementById()メソッドを呼び出し、ファイル参照ボックスのオブジェクトの要素を取得します。
var upload1 = document.getElementById("upload1");
ファイル参照ボックスオブジェクトの、filesプロパティにファイル参照ボックスで選択したファイルが格納されています。files[0]で選択されている最初のファイルを取得できます。ファイルはファイルオブジェクトとして取得できます。
var file1 = upload1.files[0];
FormDataオブジェクトを作成します。作成したFormDataオブジェクトに、ファイルを追加します。FormDataオブジェクトのappend()メソッドを呼び出します。第一引数に名称(パラメーター名)を与えます。第二引数にファイルオブジェクトを与えます。
var formdata = new FormData();
formdata.append("file", file1);
XMLHttpRequestオブジェクトを作成し、POSTでデータを送信します。送信するデータは、XMLHttpRequestオブジェクトのsend()メソッドの第一引数に与えます。今回の例では、FormDataオブジェクトを与えます。送信の完了処理はXMLHttpRequestオブジェクトのonreadystatechange イベントに実装します。今回の実装では、アラートダイアログを表示し、サーバーからのレスポンスデータをダイアログに表示します。
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
};
xmlhttp.open("POST", "GetForm04.ashx", true);
xmlhttp.send(formdata);
サーバー側のジェネリックハンドラーについては
こちらの記事の解説を参考にしてください。
実行結果
プロジェクトを実行し、Form4.html ファイルを開きます。下図の画面が表示されます。
ファイル参照ボックスの[参照]ボタンをクリックします。下図の[アップロードするファイルの選択]ダイアログ(ファイルを開くダイアログ)が表示されます。アップロードしたいファイルを選択します。
ファイル参照ボックスでファイルが選択できました。
今回アップロードするファイルは下図のテキストファイルを利用します。
ページ内の[アップロード]リンクをクリックします。アップロードが成功すると、アラートダイアログが表示され、"OK"のメッセージが表示されます。
サーバー側のHTMLファイルのディレクトリ内に、ファイルがアップロードされました。
ファイルの内容を確認します。アップロードしたファイルと内容も一致しています。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2018-04-01
作成日: 2016-05-18