HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

ASP.NET WP - 处理图像

在本章中，我们将讨论如何在您的网站上添加和显示图像。 在开发网站时，您可以将图像添加到您的网站和各个页面。 如果您的网站上已有图像，则您可以使用 HTML <img> tag 将其显示在页面上。

动态显示图像

让我们看一个简单的示例，在项目中创建一个新文件夹并将其命名为 Images，然后在该文件夹中添加一些图像。

图像

现在添加另一个 cshtml 文件并将其命名为 DynamicImages.cshtml。

动态图像

单击"确定"，然后替换 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> tag，名称为 Choice。 该列表有三个选项，每个列表选项的 value 属性都有已放入 images 文件夹中的其中一张图像的名称。

在上面的代码中，列表允许用户选择一个友好的名称，例如 Nature 1，然后在提交页面时传递 .jpg 文件名。

在代码中，您可以通过读取Request["Choice"]从列表中获取用户的选择。 首先，它将查看是否有任何选择，然后它将设置图像路径，该路径由图像文件夹的名称和用户的图像文件名组成。

让我们运行应用程序并指定以下网址http://localhost:36905/DynamicImages，然后您将看到以下输出。

显示图像

让我们点击"提交"按钮，您将看到 index.jpg 文件已加载到页面上，如下面的屏幕截图所示。

index

如果您想从下拉列表中选择另一张照片，例如《Nature 2》，然后单击"提交"按钮，它将更新页面上的照片。

更新照片

上传图片

只有当图像在您的网站上可用时，您才能动态显示该图像，但有时您必须显示在您的网站上不可用的图像。 因此，您需要先上传它，然后才能在网页上显示该图像。

让我们看一个简单的示例，在该示例中我们将上传图像，首先我们将创建一个新的 CSHTML 文件。

上传图片

在"名称"字段中输入UploadImage.cshtml，然后单击"确定"。 现在让我们替换 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 然后您将看到以下输出。

上传的图片

要上传图像，请单击选择文件，然后浏览到要上传的图像。 选择图像后，图像的名称将显示在"选择文件"按钮旁边，如以下屏幕截图所示。

选择图片

如您所见，images.jpg 图像已被选中，让我们单击"上传"按钮上传图像。

点击上传图片
❮ 上一节 下一节 ❯