Flashを用いた、単純なアップローダーを作成します。

クライアント側 (Flash)

UI

下図のUIを作成します。ラベルを2つ、ボタンを1つ配置します。ラベルには"label_dir","label_message"でIDを設定します(下図参照)。また、ボタンのClickハンドラを生成します。(Clickハンドラ生成の詳細はこちら)

コード

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

index.template.html

ファイル内の

var flashvars = {};

を

var flashvars = {dir:"(アップロードするWebディレクトリ)"};

に変更します。

例

var flashvars = {dir:"upload/test/001"};

FileUpload.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="initApp()"
               width="360" height="100" minWidth="150" minHeight="60">
  
  <fx:Script>
    <![CDATA[
      private var Dir:String;
      private var FileName:String;
      private var file:FileReference = new FileReference();
      
      protected function initApp():void{
        Dir = this.parameters["dir"];
        label_dir.text = Dir;
        label_message.text="アップロードボタンを押してファイルを選択してください。";
      }
      
      protected function button1_clickHandler(event:MouseEvent):void{
        // TODO Auto-generated method stub
        file.addEventListener(Event.SELECT, FileSelected);
        file.browse();
      }
      
      private function FileSelected(event:Event):void{
        FileName = file.name;
        var req:URLRequest = new URLRequest("http://app.ipentec.com/FileUpload.ashx?dir="+Dir
          +"&filename="+FileName);
        req.method = URLRequestMethod.POST;
       
        file.addEventListener(Event.COMPLETE, UploadComplete);       
        file.upload(req,"File");
      }
      
      private function UploadComplete(event:Event):void{
        label_message.text="アップロードが完了しました。";
        trace("complete");
      }
    ]]>
  </fx:Script>
  
  <fx:Declarations>
    <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
  </fx:Declarations>
  <s:Button x="9" y="50" label="アップロード" click="button1_clickHandler(event)"/>
  <s:Label id="label_dir" x="10" y="10" text="label_dir"/>
  <s:Label id="label_message" x="10" y="30" text="label_message"/>
</s:Application>

解説

protected function initApp():void
{
  Dir = this.parameters["dir"];
  label_dir.text = Dir;
  label_message.text="アップロードボタンを押してファイルを選択してください。";
}

Flexアプリケーション初期化時にinitAppメソッドを呼び出し、FlashVarsパラメーターを取得します(FlashVarsパラメータの取得についてはこちらの記事を参照してください。)。また、メッセージラベルを初期化します。

protected function button1_clickHandler(event:MouseEvent):void{
   // TODO Auto-generated method stub
   file.addEventListener(Event.SELECT, FileSelected);
   file.browse();
}

アップロードボタンが押されると、ファイル選択ダイアログを表示します。ファイル選択完了時にFileSelectedメソッドが呼び出されるように、addEventListenerメソッドでリスナー(イベントハンドラのメソッド)を登録します。

private function FileSelected(event:Event):void{
  FileName = file.name;
  var req:URLRequest = new URLRequest("http://app.ipentec.com/FileUpload.ashx?dir="+Dir
    +"&filename="+FileName);
  req.method = URLRequestMethod.POST;
       
  file.addEventListener(Event.COMPLETE, UploadComplete);       
  file.upload(req,"File");
}

ファイル選択が完了すると呼び出されるメソッドです。FileReference.nameプロパティで選択されたファイルの名前を取得します。URLRequestオブジェクトを作成しファイルアップロード先のURLやURLパラメータを設定します。またURLRequest.methodをPOSTで送信する設定にします。ファイルアップロード完了時にイベントが呼び出されるようにFileReferenceのFileEventListenerメソッドを呼び出しリスナーを登録します。FileReference.upload()メソッドによりファイルのアップロードが始まります。引数にはURLRequestオブジェクトとフォームのフィールド名を与えます。

サーバー側 (ASP.NET (C#))

ファイルを受け取るサーバー側を実装します。ASP.NETプロジェクトを作成ジェネリックハンドラを新規作成します。

コード

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

FileUpload.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Collections.Specialized;

namespace WebFileManager
{
  /// <summary>
  /// FileUpload の概要の説明
  /// </summary>
  public class FileUpload : IHttpHandler
  {

    public void ProcessRequest(HttpContext context)
    {
      if (context.Request.HttpMethod == "GET") {
        context.Response.ContentType = "text/plain";
        context.Response.Write("This handler only support POST method.");
      }
      else if (context.Request.HttpMethod == "POST") {
        string CurrentDir = context.Request.QueryString["dir"];
        string FileName = context.Request.QueryString["filename"];

        if (CurrentDir == null) {
          CurrentDir = "";
        }
        if (FileName == null || FileName=="") {
          CurrentDir = "default.bin";
        }

        //string ServerRoot = System.Configuration.ConfigurationManager.AppSettings["rootURI"];
        string ServerRoot = "/"; //必要に応じて変更
        string ServerPath = ServerRoot  + CurrentDir + "/" + FileName;
        string FilePath = context.Server.MapPath(ServerPath);

        HttpPostedFile content = context.Request.Files["File"];
        content.SaveAs(FilePath);

        context.Response.Write("+OK Upload File is success.");
      }
    }

    public bool IsReusable
    {
      get
      {
        return false;
      }
    }
  }
}

解説

if (context.Request.HttpMethod == "GET") {
...
}
else if (context.Request.HttpMethod == "POST") {
...
}

アクセスメソッドがGETかPOSTか判断し、POSTされた場合のみファイルの書き込みをします。

string CurrentDir = context.Request.QueryString["dir"];
string FileName = context.Request.QueryString["filename"];

ファイルアップロード先ディレクトリ、ファイル名はURLオプションから取得します。

string ServerPath = ServerRoot  + CurrentDir + "/" + FileName;
string FilePath = context.Server.MapPath(ServerPath);

MapPathメソッドを用いて相対パスから物理ディレクトリを求めます。

HttpPostedFile content = context.Request.Files["File"];
content.SaveAs(FilePath);

ファイルの保存をします。フォーム形式でPOSTされるので、context.Request.Filesにファイルのデータが格納されています。アップロードファイルのフィールド"File"を指定してファイルを取り出します。取り出したファイルはSaveAsメソッドで保存します。

context.Response.Write("+OK Upload File is success.");

HTTPによる通信のため、何らかのレスポンスが必要なため、アップロードの完了メッセージをレスポンスとして戻します。

実行結果

サーバー側、クライアント側を配置後、WebブラウザでクライアントFlexアプリケーションにアクセスします。下図の画面が表示されるので[アップロード]ボタンを押します。


ファイル選択ダイアログが表示されますので、アップロードするファイルを選択します。


アップロードサーバー側で認証がある場合は認証ダイアログが自動で表示されます。


ファイルがアップロードされると完了メッセージが表示されます。


サーバー側のディレクトリを確認します。ファイルがアップロードされています。


ファイルのデータも問題なくアップロードできています。