ASP.NET WP - Working with Images-alljchome-开发者的教程家园

ASP.NET WP Tutorial

ASP.NET WP Useful Resources

Selected Reading

ASP.NET WP - Working with Images

In this chapter, we will discuss how to add and display images on your website. You can add images to your website and to inspanidual pages when you are developing your website. If an image is already available on your site, then you can use HTML <img> tag to display it on a page.

Display Image Dynamically

Let’s have a look into a simple example by creating a new folder in the project and name it Images and then add some images in that folder.

Now add another cshtml file and Name it as DynamicImages.cshtml.

Cpck OK and then replace the following code in the DynamicImages.cshtml file.

@{
   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>

As you can see, the body of the page has a drop-down pst which is a <select> tag and it is named Choice. The pst has three options, and the value attributes of each pst option has the name of one of the images that has been put in the images folder.

In the above code, the pst lets the user select a friendly name pke Nature 1 and it then passes the .jpg file name when the page is submitted.

In the code, you can get the user s selection from the pst by reading Request["Choice"]. To begin with, it will see if there is any selection then it will set a path for the image that consists of the name of the folder for the images and the user s image file name.

Let’s run the apppcation and specify the following url http://localhost:36905/DynamicImages then you will see the following output.

Let’s cpck on the Submit button and you will see that index.jpg file is loaded on the page as shown in the following screenshot.

If you would pke to select another photo from the dropdown pst, let’s say Nature 2, then cpck the Submit button and it will update the photo on the page.

Upload Image

You can display an image dynamically only when it is available on your website, but sometimes you will have to display images which will not be available on your website. So you will need to upload it first and then you can display that image on your web page.

Let’s have a look into a simple example in which we will upload image, first we will create a new CSHTML file.

Enter UploadImage.cshtml in the Name field and cpck OK. Now let’s replace the following code in UploadImage.cshtml file

@{ 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 != ""){
         <span class = "result"><img src = "@imagePath" alt = "image" /></span>
      }
   </body>

</html>

Let’s run this apppcation and specify the following url − http://localhost:36905/UploadImage then you will see the following output.

To upload the image, cpck on Choose File and then browse to the image which you want to upload. Once the image is selected then the name of the image will be displayed next to the Choose File button as shown in the following screenshot.

As you can see the that images.jpg image is selected, let’s cpck on the Upload button to upload the image.

ASP.NET WP - Working with Images

Display Image Dynamically

Upload Image

友情链接