ASP.NET WP-画像の操作

この章では、Webサイトに画像を追加して表示する方法について説明します。 Webサイトの開発中に、Webサイトおよび個々のページに画像を追加できます。サイトで画像が既に利用可能な場合は、* HTML <img>タグ*を使用してページに表示できます。

画像を動的に表示

プロジェクトに新しいフォルダーを作成し、 Images という名前を付けて、そのフォルダーにいくつかの画像を追加して、簡単な例を見てみましょう。

画像

次に、別のcshtmlファイルを追加し、 DynamicImages.cshtml という名前を付けます。

ダイナミック画像

[OK]をクリックし、DynamicImages.cshtmlファイル内の次のコードを置き換えます。

@{
   var imagePath = "";
   if (Request["Choice"] != null){ imagePath = "images/" + Request["Choice"]; }
}

<!DOCTYPE html>
<html>

   <body>
      <h1>Display Images</h1>
      <form method = "post" action = "">
         I want to see:

         <select name = "Choice">
            <option value = "index.jpg">Nature 1</option>
            <option value = "index1.jpg">Nature 2</option>
            <option value = "index2.jpg">Nature 3</option>
         </select>

         <input type = "submit" value = "Submit"/>

         @if (imagePath != ""){
            <p><img src = "@imagePath" alt = "Sample"/></p>
         }
      </form>

   </body>
</html>

ご覧のとおり、ページの本文には* <select>タグ*であるドロップダウンリストがあり、 Choice という名前が付けられています。リストには3つのオプションがあり、各リストオプションの値属性には、imagesフォルダーに置かれた画像の名前があります。

上記のコードのリストでは、ユーザーが Nature 1 などのわかりやすい名前を選択し、ページの送信時に* .jpgファイル名*を渡します。

コードでは、 Request ["Choice"] を読み取ることで、リストからユーザーの選択を取得できます。まず、選択があるかどうかを確認し、画像のフォルダ名とユーザーの画像ファイル名で構成される画像のパスを設定します。

アプリケーションを実行して、次のURL http：//localhost：36905/DynamicImages を指定すると、次の出力が表示されます。

画像の表示

[送信]ボタンをクリックすると、次のスクリーンショットに示すように、 index.jpg ファイルがページにロードされていることがわかります。

インデックス

ドロップダウンリストから別の写真を選択する場合は、Nature 2と言い、[送信]ボタンをクリックすると、ページ上の写真が更新されます。

写真を更新

画像をアップロード

ウェブサイトで利用可能な場合にのみ画像を動的に表示できますが、ウェブサイトでは利用できない画像を表示する必要がある場合があります。そのため、最初にそれをアップロードする必要があります。次に、その画像をWebページに表示できます。

画像をアップロードする簡単な例を見てみましょう。最初に新しいCSHTMLファイルを作成します。

画像のアップロード

[名前]フィールドに UploadImage.cshtml と入力し、[OK]をクリックします。 UploadImage.cshtmlファイルの次のコードを置き換えましょう

@{ WebImage photo = null;
   var newFileName = "";
   var imagePath = "";

   if(IsPost){
      photo = WebImage.GetImageFromRequest();

      if(photo != null){
         newFileName = Guid.NewGuid().ToString() + "_" +
            Path.GetFileName(photo.FileName);
            imagePath = @"images\" + newFileName;
            photo.Save(@"~\" + imagePath);
      }
   }
}

<!DOCTYPE html>
<html>

   <head>
      <title>Image Upload</title>
   </head>

   <body>
      <form action = "" method = "post" enctype = "multipart/form-data">

         <fieldset>
            <legend> Upload Image </legend>
            <label for = "Image">Image</label>
            <input type = "file" name = "Image" size = "35"/>
            <br/>
            <input type = "submit" value = "Upload"/>
         </fieldset>

      </form>
      <h1>Uploaded Image</h1>

      @if(imagePath != ""){
         <div class = "result"><img src = "@imagePath" alt = "image"/></div>
      }
   </body>

</html>

このアプリケーションを実行し、次のURLを指定してみましょう- http：//localhost：36905/UploadImage 。次の出力が表示されます。

アップロードされた画像

画像をアップロードするには、 Choose File をクリックしてから、アップロードする画像を参照します。画像が選択されると、次のスクリーンショットに示すように、画像の名前が[ファイルの選択]ボタンの横に表示されます。

画像を選択

*images.jpg* 画像が選択されていることがわかりますので、[アップロード]ボタンをクリックして画像をアップロードします。

画像のアップロードをクリック

Asp.net-wp-working-with-images

ASP.NET WP-画像の操作

画像を動的に表示

画像をアップロード