[JavaScript] HTML5のFileオブジェクトを利用したファイルアップロード

このページのタグ:[JavaScript] [ファイルアップロード]
HTML5のFileオブジェクトを利用したファイルアップロードのコードを紹介します。

概要

[[こちらの記事]]では、JavaScriptでXMLHttpRequestとファイル選択ボックスを利用したファイルアップロードのコードを紹介しました。この記事では、HTML5で導入されたファイルオブジェクトを利用してファイルをアップロードするコードを紹介します。

プログラム

コード

下記のコードを記述します。

Form04.html


<!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>

GetForm04.ashx

ポストされたファイルを受け取る側の実装です。今回は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;
      }
    }
  }
}

解説


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);
}
ページの[アップロード]リンクをクリックすると、上記のExecUplaod()関数が呼び出されます。


  var upload1 = document.getElementById("upload1");
上記コードでは、getElementById()メソッドを呼び出し、ファイル参照ボックスのオブジェクトの要素を取得します。


  var file1 = upload1.files[0];
ファイル参照ボックスオブジェクトの、filesプロパティにファイル参照ボックスで選択したファイルが格納されています。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について
iPentec all rights reserverd. (ISDC)