はじめに
.NET Frameworkには文字どおり何千もの側面があり、その細部を学んだり、覚えたり、理解したりするためには、それについて文章を書くと効果的です。この方法は、サムネイル画像など、使用頻度の低いものに対して特に有効です。筆者は、数年前にラベルの画像を管理するアプリケーションを作成したのですが、いざ画像をアップロードしようとしたときに、サムネイル画像の作成方法を忘れていたことに気づきました。これは役立ちそうな内容なので、記事として公開しようと思います。
この記事では、<input>コントロールを使用して画像を参照およびアップロードし、その画像をWebサイト上に表示するためのサムネイルに変換する方法について説明します。紹介するコードは、各種のサニティチェックを行わない簡単なASPXです。サンプルとしての目的を果たすには十分ですが、実用アプリケーションとして使う場合には、確認やエラーチェックを追加することをお勧めします（ただし、この記事では扱いません）。
<input>要素を使ってファイルをアップロードする
HTML要素<input>は、さまざまな用途に使われるHTMLコントロールです。<input>要素はtype属性に指定された値に基づき、汎用ボタン、ラジオボタン、リセットボタン、送信ボタン、チェックボックス、ファイルアップローダ、隠しコントロール、イメージコントロール、パスワードフィールド、テキストコントロールとして機能できます。ファイルアップローダとして使用する場合は、<input>要素のtype属性をfileに設定します。すると、テキストボックスと［Browse］というラベルの付いたボタンが表示されます。手作業でコーディングすることも可能ですが、ファイルアップローダを表示する最も簡単な方法は、Visual Studioのツールボックスの［HTML］タブで、［Input（File）］項目を選択することです。
今回のサンプルのASPXページには、ラベルの他に、ファイルアップローダタイプの<input>要素と、選択した画像ファイルを送信するためのボタン、および<img>要素を配置します。サーバは、送信された画像のサムネイルを作成してブラウザに返します。すると、ブラウザがそのサムネイルを同じページの<img>要素に表示します。コントロールの配置はHTMLテーブルで行います（リスト1を参照）。デザイン時には、ページは図1のようになります。
<%@ Page Language="VB" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Import Namespace="NUnit.Framework" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="50%">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Select
Image:"></asp:Label>
</td>
<td>
<input id="File1" type="file" runat="server" /></td>
<td rowspan="2" align="center" valign="middle">
<img id="PreviewImage" alt="" src="" runat="server" /></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle">
<asp:Button ID="Button1" runat="server" Text="Upload" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
HTMLテーブルはさまざまな目的に利用でき、使い方も簡単です。シンプルなスプレッドシート風のテーブルが必要な場合は、<tr>要素で行を追加し、<td>要素でセルを追加します。1つのセルを複数行にまたがらせる場合は<td>要素のrowspan属性を設定し、複数列にまたがらせる場合は<td>要素のcolspan属性を設定します。
リスト1のHTMLでもう1つ注目してほしい点は、<img>コントロール（図1の2列目）がID属性を持ち、runat属性がserverに設定されていることです。このrunat属性を設定することによって、サーバーサイドのコードビハインドで<img>コントロールを操作できるようになります。後でこの機能を利用して、作成したサムネイル画像を<img>コントロールに表示します。
アップロードした画像を保存する
<input>コントロールのtype属性をfileに設定すると、ユーザーが［Browse］ボタンをクリックして、ファイルを選択できるようになります。ユーザーがファイルを選択してからこのページを送信すると、<input>コントロールのPostedFileプロパティが設定されます。PostedFileプロパティは、選択したファイルの内容とその他のファイル情報（ファイル名など）を格納するクラスです。具体的に言うと、PostedFileはHttpPostedFileクラスのインスタンスです。
ユーザーがこのGUIを使用するときは、まず［Browse］ボタンをクリックし、ファイルを選択してから、［Upload］ボタンをクリックします。ポストされたファイルをサーバ側で保存するには、<input>コントロールのPostedFile.SaveAsメソッドを呼び出し、ファイルの保存先のパスとファイル名を渡します。この部分のコードを次に示します。ごく簡単な処理であることが分かるでしょう。
Private Const imagePath As String = "~/Images/" Private Sub SaveUploadedFile(ByVal filename As String) File1.PostedFile.SaveAs(MapPath(imagePath) + filename) End Sub
このコードに出てくるFile1は<input>コントロールのIDです（<input>コントロールはHTMLコントロールですが、runat="server"属性が設定されているので、サーバーサイドでも使用可能です）。
