六、在 ASP.NET 中使用图形

本章探讨如何使用 jQuery 在 ASP 中嵌入图形.NET 网站和 MVC。 本章将介绍以下食谱:

  • 在图像上创建聚光灯效果
  • 鼠标悬停时缩放图像
  • 创建图像滚动条
  • 使用 z-index 属性构建一个图片库
  • 使用 ImageMap 控件构建一个相册
  • 使用图像在菜单控件中创建效果
  • 创建一个 5 星级的评级控件
  • 在 MVC 中预览图像上传

简介

Web 完全是关于内容和向观众展示内容。 内容的视觉表现和交互性以及用户友好性是构建网站时需要考虑的重要因素。 在网页内容中使用图形增加了其视觉吸引力，并增强了最终用户的体验。 图形的例子包括图像、动画 gif、flash、图表、图像按钮等等。

jQuery 简化了将图形集成到 web 内容的过程。 它提供了在 web 元素上创建效果和动画的实用程序。 可以方便地附加事件处理程序，并且客户端处理可以避免往返于服务器，从而提高性能。

使用 jQuery, ASP.NET 服务器控件(例如Image、ImageButton和ImageMap可以通过效果、动画和事件处理程序进行增强。 简单的 HTML 元素，比如图像元素，也可以使用 jQuery 进行操作。 这种方法在 MVC 应用中很有用，因为 MVC 使用 HTML 元素而不是服务器控件。

在本章中，我们将看看 jQuery 在图形元素中的一些常见用法。

在图像上创建聚光灯效果

通常需要在焦点项目上创建一个聚光灯，例如文本或网页上的任何图形元素，以吸引对该项目的注意。 在这个食谱中，让我们看看如何在一组图像上创建这样的效果。 下表总结了本例中使用的结构:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象 | | .addClass() | jQuery 方法 | 这会将指定的 CSS 类添加到每个匹配的元素中 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 style 属性，或者设置每个匹配元素的 style 属性 | | .hover() | jQuery 事件绑定 | 这绑定了mouseover和mouseout事件的事件处理程序 | | .removeClass() | jQuery 方法 | 这将从每个匹配的元素中删除指定的 CSS 类 |

准备

让我们构建一个带有聚焦效果图片的网页:

  1. Let's create a web page with a collection of image controls arranged in a grid format, as shown in the following screenshot:

    Getting ready

  2. On moving the mouse pointer over any image in the grid, the focused item receives a spotlight with the remaining items fading out, as shown in this screenshot:

    Getting ready

  3. 要创建此应用，请启动ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe1(或任何其他合适的名称)。

  4. 将 jQuery 库添加到的Scripts文件夹中。 向images文件夹中添加一些示例图像。
  5. 添加一个 web 表单到项目中，并在表单中包含 jQuery 库。
  6. 将以下标记添加到页面中，以创建一个具有两行三列的表。 在每个表单元格中添加一个Image控件:

  7. Include the following styles on the page to set the display dimensions of the images and padding/margins for the table element:

    ```

    container img {

    width: 213px; height: 142px; display: block; }

    container table {

    padding: 1px; }

    container td {

    padding: 0px; margin: 0px; }

    .highlight { border-color: #000000; border-width: 1px; border-style: solid; } ```

    前面定义的高亮 CSS 类将用于给聚焦的图像附加边框。

怎么做……

添加以下 jQuery 代码到页面的<script>块:

<script type="text/javascript">
$(document).ready(function() {
  $("#container img").hover(
    function() {
      $("#container img").css("opacity", "0.2");
      $(this).css("opacity", "1");
      $(this).addClass("highlight");
    },
    function() {
      $("#container img").css("opacity", "1");
      $(this).removeClass("highlight");
    });
});
</script>

How it works…

对图像的聚焦效果实现如下:

  1. 用Ctrl+S保存页面，然后用F5运行。 这将在浏览器窗口中启动页面，图像将显示在网格中。
  2. 使用.hover()方法将mouseover和mouseout事件处理程序绑定到图像上，如下所示:

  3. On moving the mouse pointer over any image, the mouseover event handler is triggered. This handler, first of all, fades all images in the grid by setting their opacity to 0.2:

    $("#container img").css("opacity", "0.2");

    只有聚焦后的图像，即有聚光灯的图像，通过将其opacity设置为1而完全不透明:

    $(this).css("opacity", "1");

    通过添加highlightCSS 类，一个实心边框也应用于聚焦图像:

    $(this).addClass("highlight");

  4. On moving the mouse pointer outwards from the spotlight, the mouseout event handler is triggered. This event handler restores the opacity of all images in the grid to 1:

    $("#container img").css("opacity", "1");

    它也从聚焦图像中删除了实边界:

    $(this).removeClass("highlight");

参见 also

使用图像在菜单控件配方中创建效果

鼠标悬停时缩放图像

一些应用需要在特定位置缩放或放大图像。 在这个食谱中，我们将在鼠标进入图像的位置缩放图像。 本例中使用的构造如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 style 属性，或者设置每个匹配元素的 style 属性。 | | height | CSS 属性 | 这是元素的高度。 | | left | CSS 属性 | 这是元素左边缘的位置。 对于绝对定位的元素，它指示左边缘相对于父元素的位置。 | | mousemove | jQuery 的事件 | 当鼠标指针移动到元素内部时，就会触发此操作。 它对应于 JavaScript 的mousemove事件。 | | mouseout | jQuery 的事件 | 当鼠标指针离开一个元素时触发。 它对应于 JavaScript 的mouseout事件。 | | mouseover | jQuery 的事件 | 当鼠标指针进入一个元素时触发。 它对应于 JavaScript 的mouseover事件。 | | .on() | jQuery 事件绑定 | 这将为一个或多个事件附加一个事件处理程序到匹配的元素。 | | pageX | jQuery 事件属性 | 这将返回鼠标指针相对于文档左边缘的位置。 | | pageY | jQuery 事件属性 | 这将返回鼠标指针相对于文档顶部边缘的位置。 | | .prop(propertyName)或.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值。 | | top | CSS 属性 | 这是元素的上边缘的位置。 对于绝对定位的元素，它指示上边缘相对于父元素的位置。 | | width | CSS 属性 | 这是元素的宽度。 |

准备

让我们构建一个页面，在鼠标悬停时缩放图像:

  1. In this example, we will create a page with a single image control, as shown in the following screenshot:

    Getting ready

    当将鼠标移动到图像上时，它将在鼠标指针第一次进入图像的位置缩放，如下所示:

    Getting ready

    将鼠标指针移动到图像上，可以使放大的图像沿鼠标方向滚动。

  2. 要开始，请使用ASP 的空模板.NET Web 应用项目，并将项目命名为Recipe2(或任何其他合适的名称)。

  3. 将 jQuery 库添加到项目中的Scripts文件夹中。 在images文件夹中包含一个测试映像。
  4. 创建一个 web 表单，并在表单中包含 jQuery 库。
  5. 通过导航到工具箱|Standard到container``div元素，添加Image控件，创建以下标记:

  6. 要设置container``div的尺寸，请在页面中包含以下 CSS:

    ```

    container {

    width: 640px; height: 480px; overflow: hidden; position: relative; }

    imgSample {

    position: absolute; } ```

  7. Note that the position of the container div is set to relative while the position of the Image control is set to absolute. To be able to move an absolutely positioned child element within a parent element, the parent element should be relatively positioned.

    container``div的overflow被设置为hidden，因此放大的图像被保留在其中，并且对最终用户隐藏任何溢出。 图像可以滚动查看隐藏区域。

怎么做……

将下面的 jQuery 代码添加到页面的<script>块中:

<script type="text/javascript">
$(document).ready(function() {
  $("#<%=imgSample.ClientID%>").on("mouseover", function(evt) {
    var zoomIndex = 2;
    var iWidth = $(this).prop("width");
    var iHeight = $(this).prop("height");
    var newWidth = iWidth * zoomIndex;
    var newHeight = iHeight * zoomIndex;
    var posX = evt.pageX;
    var posY = evt.pageY;
    $(this).css({
      width: newWidth,
      height: newHeight,
      left: -posX,
      top: -posY
    });
  });
  $("#<%=imgSample.ClientID%>").on("mousemove", function(evt) {
    var posX = evt.pageX;
    var posY = evt.pageY;
    $(this).css({
      left: -posX,
      top: -posY
    });
  });
  $("#<%=imgSample.ClientID%>").on("mouseout", function() {
    $(this).css({
      width: "640px",
      height: "480px",
      left: 0,
      top: 0
    });
  });
});
</script>

How it works…

鼠标悬停时图像的缩放实现如下:

  1. jQuery 代码使用以下代码将mouseover，mousemove和mouseout事件的事件处理程序附加到图像控件:

  2. In the mouseover event handler, the image is enlarged and the position of the image is shifted so that the image appears to zoom at the location where the mouse pointer enters the image. The amount of zoom is determined by the zoomIndex variable, as follows:

    var zoomIndex = 2;

    这里，图像被放大到原来尺寸的两倍。

    使用.prop()方法获取图像的原始尺寸，使用zoomIndex变量计算新尺寸:

    var iWidth = $(this).prop("width"); var iHeight = $(this).prop("height"); var newWidth = iWidth * zoomIndex; var newHeight = iHeight * zoomIndex;

    鼠标指针的x和y坐标由evt事件变量给出的mouseover事件的pageX和pageY属性决定:

    var posX = evt.pageX; var posY = evt.pageY;

    然后使用css()方法设置图像的新尺寸和位置。 图像的左侧和顶部位置发生了改变，因此它会在鼠标指针的位置上移动并缩放。 我们可以使用任何常量值来进行移位，也可以使用posX和posY值，如下代码所示:

    $(this).css({ width: newWidth, height: newHeight, left: -posX, top: -posY });

  3. In the mousemove event handler, the enlarged image is scrolled in the direction of the mouse pointer. This is done by first retrieving the x and y coordinates of the mouse pointer:

    var posX = evt.pageX; var posY = evt.pageY;

    然后使用css()方法中前面的值更新图像的左侧和顶部位置:

    $(this).css({ left: -posX, top: -posY });

  4. In the mouseout event handler, the image is reset to its original dimension and position using the .css() method:

    $(this).css({ width: "640px", height: "480px", left: 0, top:0 });

    因此，图像缩小到其原始大小并绝对定位，即在containerdiv 的left等于0和top等于0处。

提示

变量 T0 控制当前代码示例中的缩放量。 我们用了zoomIndex = 2。 您可以在脚本中使用不同的zoomIndex值进行实验。 或者，允许用户通过提供DropDownList控件或任何其他合适的控件来输入放大倍数。

参见 also

使用 z-index 属性创建图片库

创建图像滚动条

这个配方演示了通过动画化父容器元素的左侧位置，将一系列图像水平地向左或向右滚动。 本例中使用的构造总结如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | .animate() | jQuery 方法 | 这将对指定的 CSS 属性执行自定义动画。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | event.preventDefault() | jQuery 方法 | 这将防止触发事件的默认动作。 | | left | CSS 属性 | 这是元素左边缘的位置。 | | .on() | jQuery 事件绑定 | 这将一个事件处理程序附加到一个或多个事件的匹配元素。 | | z-index | CSS 属性 | 这是元素的 z 轴顺序。 当元素重叠时，具有较高 z 轴次序的元素会出现在具有较低 z 轴次序的元素之上。 |

准备

让我们通过以下步骤创建一个图像滚动条页面:

  1. 让我们开始创建一个新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe3(或任何其他合适的名称)。
  2. 向项目中添加一个Scripts文件夹，并将 jQuery 库包含在此文件夹中。
  3. 在项目的images文件夹中添加一些示例图像。
  4. 添加一个新的 web 表单，并在表单中包含 jQuery 库。

  5. Include the following markup on the form:

    <div id="container"> <asp:ImageButton ID="btnLeftScroll" runat="server" ImageUrl="~/images/arrow-left-icon.png" /> <asp:ImageButton ID="btnRightScroll" runat="server" ImageUrl="~/images/arrow-right-icon.png" /> <table id="tblImages"> <tr> <td> <asp:Image ID="imgSample1" runat="server" ImageUrl="~/images/image1.jpg" Width="640" Height="425" /> </td> <td> <asp:Image ID="imgSample2" runat="server" ImageUrl="~/images/image2.jpg" Width="640" Height="427" /> </td> <td> <asp:Image ID="imgSample3" runat="server" ImageUrl="~/images/image3.JPG" Width="640" Height="360" /> </td> <td> <asp:Image ID="imgSample4" runat="server" ImageUrl="~/images/image4.JPG" Width="640" Height="427" /> </td> <td> <asp:Image ID="imgSample5" runat="server" ImageUrl="~/images/image5.JPG" Width="640" Height="427" /> </td> <td> <asp:Image ID="imgSample6" runat="server" ImageUrl="~/images/image6.JPG" Width="640" Height="427" /> </td> <td> <asp:Image ID="imgSample7" runat="server" ImageUrl="~/images/image7.JPG" Width="640" Height="427" /> </td> </tr> </table> </div>

    这个将创建一个由table组成的container``div元素，该元素有 7 列 1 行。 每个表格单元格包含一个Image控件。 这些图像可能/可能没有不同的尺寸。

    两个ImageButton控件分别用于向左和向右滚动。 这些ImageButton控件使用 CSS 叠加在显示的图像之上。

  6. Apply the following styles to the preceding markup:

    ```

    container{

    position:relative; overflow:hidden; width:640px; height:427px; vertical-align:central; margin:0; }

    tblImages{

    position:absolute; padding:0px; margin:0px; border-collapse:collapse; }

    tblImages td{

    padding:0px; }

    btnLeftScroll{

    position:absolute; left:10px; top:200px; z-index:2; width:48px; height:48px; }

    btnRightScroll{

    position:absolute; left:580px; top:200px; z-index:2; width:48px; height:48px; } ```

    注意事项

    注意的position``container``div设置为relative的position表包含的图像设置为absolute,container内的表可以移动 div。左边和右边的position按钮也将【显示】的z-index``2的按钮出现在顶部显示的图像。

  7. Thus, the page will appear, as shown in the following screenshot:

    Getting ready

    点击左键后，序列向左移动，如下图所示:

    Getting ready

    类似地，单击右按钮后，序列向右滚动，如所示:

    Getting ready

怎么做……

添加以下 jQuery 代码到页面的<script>块:

<script type="text/javascript">
$(document).ready(function() {
  var containerWidth = 640;
  var totalImgWidth = 640 * 7;
  var leftEdgePos = 0;
  var rightEdgePos = totalImgWidth - 50;
  $("#<%=btnLeftScroll.ClientID%>").on("click", function(evt) {
    evt.preventDefault();
    scrollLeft();
  });
  $("#<%=btnRightScroll.ClientID%>").on("click", function(evt) {
    evt.preventDefault();
    scrollRight();
  });

  function scrollLeft() {
    if (rightEdgePos > containerWidth) {
      rightEdgePos -= 200;
      leftEdgePos -= 200;
      $("#tblImages").animate({
        left: '-=200px'
      }, 1500, "linear");
    }
  }

  function scrollRight() {
    if (leftEdgePos < 0) {
      leftEdgePos += 200;
      rightEdgePos += 200;
      $("#tblImages").animate({
          left: '+=200px'
        }, 1500,
        "linear");
    }
  }
});
</script>

How it works…

图像滚动条的工作原理如下:

  1. 用Ctrl+S保存页面，然后用F5运行。 这将在浏览器窗口中启动应用。 在加载时，页面将按顺序显示第一个图像以及左右箭头按钮。 要滚动，请单击相应的按钮。 注意，当向右滚动时，一旦第一个图像的左边缘与容器 div 的左边缘重合，滚动就会停止。 类似地，当向左滚动时，当最后一个图像的右边缘与容器 div 的右边缘重合时，滚动将停止。
  2. .aspx标记由container``div组成，其宽度为640px，高度为427px。 它的position被定义为relative，这样子元素就可以完全定位在其中。 overflow被定义为hidden，因此每次我们只能查看子元素的640px *427px 窗口。

  3. The container div has a child table element with an ID equal to tblImages. This table contains the images arranged column-wise. These are the images that we need to scroll. The table is absolutely positioned so that it's left edge can be animated. At any time, the user will see only the CONTAINER DIV, that is, the blue shaded area in the following diagram, and the table will scroll in the background:

    How it works…

  4. In the jQuery script, the container div width is kept constant at 640 px:

    var containerWidth = 640;

    由于有 7 张图片，每张图片的宽度为640px，所以可以确定总的表宽，如下所示:

    var totalImgWidth = 640 * 7;

    tblImages的左边缘的位置被初始化为与容器 div 的左边缘重合:

    var leftEdgePos = 0;

    tbimagages的右边缘的位置被初始化为与表的总宽度减去50px 相一致，以防止右边缘滚动超过容器 div 的右边缘:

    var rightEdgePos = totalImgWidth - 50;

  5. 事件的事件处理程序附加到每个ImageButton控件，即左按钮和右按钮。 左键调用scrollLeft函数，右键调用scrollRight函数。 两个事件处理程序都调用event.preventDefault()方法来防止页面回发:

  6. 让我们以为例，看看scrollLeft()函数中发生了什么。 首先，我们需要检查滚动表的右边缘的位置。 如果右边缘位于container``div右边缘的右边，我们可以使表格动起来并将其向左滑动。 对于每次点击左键，我们将在1500ms 中将表格向左移动200px。左右边缘的位置通过200px 调整，如下代码所示:

    function scrollLeft() { if (rightEdgePos > containerWidth) { rightEdgePos -= 200; leftEdgePos -= 200; $("#tblImages").animate({ left: '-=200px' }, 1500, "linear"); } }

  7. 类似地，在scrollRight函数中，我们检查滚动表的左边缘位置。 如果左侧边缘位于container``div左侧边缘的左侧，则可以使表格动画并将其向右侧滑动。 每点击一次右按钮，我们就会在1500ms 中将表格向右移动200px，表格的左右边缘位置也会相应地调整200px:

参见 also

在图像上创建聚光灯效果配方

使用 z-index 属性创建相册

照片图库是大多数社交媒体网站上常见的功能。 使用 jQuery 构建这些库的方法有很多种。 在本食谱中，让我们使用 z-index CSS 属性来构建这样一个应用。 下表显示了本例中使用的构造的摘要:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 style 属性，或者设置每个匹配元素的 style 属性。 | | .each() | jQuery 方法 | 这将遍历匹配的元素，并为每个元素执行一个函数。 | | event.preventDefault () | jQuery 方法 | 这将防止触发事件的默认动作。 | | .length | jQuery 的财产 | 这将返回 jQuery 对象中的元素数量。 | | .on() | jQuery 事件绑定 | 这将一个事件处理程序附加到一个或多个事件的匹配元素。 | | parseInt(string) | JavaScript 函数 | 它将字符串转换为整数。 | | z-index | CSS 属性 | 这是元素的 z 轴顺序。 当元素重叠时，具有较高 z 轴次序的元素会出现在具有较低 z 轴次序的元素之上。 |

准备

按照以下步骤使用 z-index 属性创建一个带有图片库的页面:

  1. We aim to create a page that displays one image at a time from a sequence of images. Navigation in the sequence is possible by clicking on the previous and next buttons. The images are displayed in a loop, so clicking on the next button on the last image displays the first image and clicking on the previous button on the first image displays the last image:

    Getting ready

  2. 要创建此图库，请启动新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe4(或任何其他合适的名称)。

  3. 在项目中创建一个Scripts文件夹，并将 jQuery 库添加到该文件夹中。 在images文件夹中包含一些示例图像。
  4. 创建一个新的 web 表单，并在表单中包含 jQuery 库。

  5. 我们将创建一个包含两行和一列的 HTML<table>元素。 第一行将有 6 个Image控件，它们通过id = container添加到表格单元格中。 第二行将有两个ImageButton控件用于前一个和下一个图像导航。 因此，向表单添加以下标记:

    <table><tr><td id="container"> <asp:Image ID="imgSample1" ImageUrl="~/images/image1.jpg" runat="server" /> <asp:Image ID="imgSample2" ImageUrl="~/images/image2.jpg" runat="server" /> <asp:Image ID="imgSample3" ImageUrl="~/images/image3.jpg" runat="server" /> <asp:Image ID="imgSample4" ImageUrl="~/images/image4.jpg" runat="server" /> <asp:Image ID="imgSample5" ImageUrl="~/images/image5.jpg" runat="server" /> <asp:Image ID="imgSample6" ImageUrl="~/images/image6.jpg" runat="server" /> </td></tr> <tr><td> <asp:ImageButton ID="btnPrevious" CssClass="buttonStyle" ImageUrl="~/images/backward.ico" runat="server" ToolTip="View previous photo" />&nbsp;&nbsp; <asp:ImageButton ID="btnNext" CssClass="buttonStyle" ImageUrl="~/images/forward.ico" runat="server" ToolTip="View next photo"/> </td></tr> </table>

  6. 在页面上包括以下样式，以便设置元素的尺寸和它们各自的位置:

    <style type="text/css"> buttonStyle{ width:68px; height:68px; } #container{ position:relative; width:640px; height:425px; } #container img{ position:absolute; top:0px; left:0px; } td{ text-align:center; } </style>

注意事项

注意，容器表单元格的position属性被定义为relative。 这使得它的子元素能够被绝对定位。 它的尺寸保持不变，所有的图片都以这些尺寸显示在画廊中。

怎么做……

将和的 jQuery 代码添加到页面的<script>块中:

<script type="text/javascript">
$(document).ready(function() {
  var maxZIndex = $("#container img").length;
  var tempZIndex = maxZIndex;
  $("#container img").each(function() {
    $(this).css("z-index", tempZIndex);
    tempZIndex--;
  });
  $("#<%=btnPrevious.ClientID%>").on("click",
    function(evt) {
      evt.preventDefault();
      $("#container img").each(function() {
        var currZIndex = parseInt($(this).css("z-index"));
        if (currZIndex == 1)
          $(this).css("z-index", maxZIndex);
        else
          $(this).css("z-index", currZIndex - 1);
      });
    });
  $("#<%=btnNext.ClientID%>").on("click",
    function(evt) {
      evt.preventDefault();
      $("#container img").each(function() {
        var currZIndex = parseInt($(this).css("z-index"));
        if (currZIndex == maxZIndex)
          $(this).css("z-index", 1);
        else
          $(this).css("z-index", currZIndex + 1);
      });
    });
});
</script>

How it works…

图片库的作品如下:

  1. On launching the page in the browser, the gallery displays the first image in the markup. After clicking on the previous or next button, it navigates to the required images, as shown in the following screenshot:

    How it works…

  2. In the jQuery code, we assign a z-index construct to each image, ranging from 1 to the maximum number of images. The image with the highest z-index at any point in time will be displayed in the gallery. To do this, first determine the total number of images:

    var maxZIndex = $("#container img").length;

    现在给每个图像元素赋值z-index，方法是给第一张图像赋值最高的索引，然后对循环中的每个元素递减1:

    var tempZIndex = maxZIndex; $("#container img").each(function () { $(this).css("z-index", tempZIndex); tempZIndex--; });

  3. An event handler is attached to the previous button for the click event, as follows:

    $("#<%=btnPrevious.ClientID%>").on("click", function (evt) {…});

    在这个事件处理程序中，首先，我们阻止页面在点击按钮时发回:

    evt.preventDefault();

    然后，各图像元素的z-index减小1。 如果任何元素的z-index具有最小值，即1，则将其重置为最大值。 这确保了图像在循环中显示; 当你点击上一个按钮时，第一个图像将显示最后一个图像:

    $("#container img").each(function () { var currZIndex = parseInt($(this).css("z-index")); if (currZIndex == 1) $(this).css("z-index", maxZIndex); else $(this).css("z-index", currZIndex-1); });

  4. An event handler is attached to the next button for the click event, as follows:

    $("#<%=btnNext.ClientID%>").on("click", function (evt) {…});

    在这个事件处理程序中，页面首先被阻止发回:

    evt.preventDefault();

    每个图像元素的z-index加1。 如果元素的z-index具有最大值，则将其重置为1。 这确保当你点击 next 按钮时，最后一张图片将显示第一张图片:

    $("#container img").each(function () { var currZIndex = parseInt($(this).css("z-index")); if (currZIndex == maxZIndex) $(this).css("z-index", 1); else $(this).css("z-index", currZIndex + 1); });

参见 also

使用 ImageMap 控件配方构建相册

使用 ImageMap 控件构建一个相册

由于图库可以使用许多不同的方法来构建，所以让我们利用 ASP.NETImageMap控件中创建图库。 下表列出了本例中使用的构造的摘要:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | [attribute= "value"] | jQuery 选择器 | 这将选择具有指定属性等于"value"字符串的元素。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | event.preventDefault() | jQuery 方法 | 这将防止触发事件的默认动作。 | | .hide() | jQuery 方法 | 这将隐藏匹配的元素。 | | .hover() | jQuery 事件绑定 | 这绑定了mouseover和mouseout事件的事件处理程序。 | | .on() | jQuery 事件绑定 | 这将一个事件处理程序附加到一个或多个事件的匹配元素。 | | .prop(propertyName)或.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值。 | | .show() | jQuery 方法 | 这会显示匹配的元素。 |

准备

按照以下步骤用 ImageMap 控件构建页面:

  1. 创建一个新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe5(或任何其他合适的名称)。
  2. 添加一个Scripts文件夹，并将 jQuery 库包含在该文件夹中。
  3. 在项目中添加一个images文件夹。 向文件夹中添加一些示例图像。
  4. 创建一个 web 表单，并在表单中包含 jQuery 库。
  5. 进入工具箱|Standard，添加一个ImageMap和两个Image控件到窗体中。 ImageMap将用于在相册中显示图像，而Image控件将用于显示左右方向箭头。

  6. Define two rectangular hotspots on the ImageMap control with the dimension 50 * 58, assuming that the image is of the dimension 680 * 425. The position of the two hotspots is shown in the following image:

    Getting ready

    这可以通过在.aspx页面中添加以下标记来实现:

    <div id="container"> <asp:Image ID="imgPrevious" ImageUrl="~/images/Arrows-Back-icon.png" runat="server" /> <asp:Image ID="imgNext" ImageUrl="~/images/Arrows-Forward-icon.png" runat="server" /> <asp:ImageMap ID="imgMap" ImageUrl="~/images/image1.jpg" runat="server"> <asp:RectangleHotSpot HotSpotMode="NotSet" Left="0" Right="50" Top="212" Bottom="270" AlternateText="Previous" /> <asp:RectangleHotSpot HotSpotMode="NotSet" Left="630" Right="680" Top="212" Bottom="270" AlternateText="Next" /> </asp:ImageMap> </div>

  7. To set the dimensions and positions of the elements, include the following styles on the page:

    ```

    container{

    position:relative; }

    imgMap{

    width:680px; height:425px; position:absolute; top:0px; left:50px; }

    imgPrevious{

    top:212px; left:0px; position:absolute; width:48px; height:48px; }

    imgNext{

    top:212px; left:750px; position:absolute; width:48px; height:48px; } ```

    container``div是相对定位的，而这个div中的所有其他控件是绝对定位的。

  8. On launching the browser, the page will display the first image in the gallery, as shown in the following screenshot. On mouseover on the hotspot on the left, the left direction arrow will appear:

    Getting ready

    同样，将鼠标悬停在右侧热点上，会出现右侧方向箭头，如下图所示:

    Getting ready

    在下一节中，我们将添加 jQuery 代码，用于在单击相应热点后显示上一张或下一张图像。

怎么做……

将下面的 jQuery 代码添加到的<script>块中:

<script type="text/javascript">
$(document).ready(function() {
  var imgArr = ["image1.jpg", "image2.jpg", "image3.jpg",
    "image4.jpg", "image5.jpg", "image6.jpg"
  ];
  var minIndex = 0;
  var maxIndex = imgArr.length - 1;
  var currIndex = 0;
  var basePath = "/images/";
  $("#<%=imgPrevious.ClientID%>").hide();
  $("#<%=imgNext.ClientID%>").hide();
  $("map area[title='Previous'").hover(
    function() {
      $("#<%=imgPrevious.ClientID%>").show();
    },
    function() {
      $("#<%=imgPrevious.ClientID%>").hide();
    });
  $("map area[title='Next'").hover(
    function() {
      $("#<%=imgNext.ClientID%>").show();
    },
    function() {
      $("#<%=imgNext.ClientID%>").hide();
    });
  $("map area[title='Previous'").on("click", function(evt) {
    evt.preventDefault();
    if (currIndex == minIndex)
      currIndex = maxIndex;
    else
      currIndex--;
    var imgPath = basePath + imgArr[currIndex];
    $("#<%=imgMap.ClientID%>").prop("src", imgPath);
  });
  $("map area[title='Next'").on("click", function(evt) {
    evt.preventDefault();
    if (currIndex == maxIndex)
      currIndex = minIndex;
    else
      currIndex++;
    var imgPath = basePath + imgArr[currIndex];
    $("#<%=imgMap.ClientID%>").prop("src", imgPath);
  });
});
</script>

How it works…

图片画廊作品如下:

  1. In the jQuery code, define an array to store the names of all image files that are required to be displayed in the gallery:

    var imgArr = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg"];

    然后初始化该数组的最小和最大索引:

    var minIndex = 0; var maxIndex = imgArr.length - 1;

    当前索引，即当前在图库中任意时刻显示的图像的索引，初始化为0:

    var currIndex = 0;

  2. 接下来，初始化包含显示图像的文件夹的基本路径:

  3. 最初隐藏左右箭头。 这些将只显示在鼠标悬停在各自的热点:

    $("#<%=imgPrevious.ClientID%>").hide(); $("#<%=imgNext.ClientID%>").hide();

  4. Use the .hover() method to attach the mouseover and mouseout event handlers on the hotspots. At runtime, the ImageMap control is rendered as an img element and a map element, as shown in the following code:

    <img id="imgMap" src="images/image1.jpg" usemap="#ImageMapimgMap" /> <map name="ImageMapimgMap" id="ImageMapimgMap"> <area shape="rect" coords="0,212,50,270" href="" title="Previous" alt="Previous" /> <area shape="rect" coords="630,212,680,270" href="" title="Next" alt="Next" /> </map>

    热点可以通过title属性进行区分。 因此，左侧热点可以使用$("map area[title='Previous']")选择，右侧热点可以使用$("map area[title='Next']")选择。

    因此，可以使用.hover()方法与左侧热点一起显示/隐藏左侧方向箭头，如下所示:

    $("map area[title='Previous']").hover( function () { $("#<%=imgPrevious.ClientID%>").show(); }, function () { $("#<%=imgPrevious.ClientID%>").hide(); });

    同样，它也可以和右边的热点一起使用来显示/隐藏右边的方向箭头，如下所示:

    $("map area[title='Next']").hover( function () { $("#<%=imgNext.ClientID%>").show(); }, function () { $("#<%=imgNext.ClientID%>").hide(); });

    在上述代码中，当鼠标悬停时，显示所需的箭头图像，当鼠标悬停时，隐藏箭头图像。

  5. 我们还为热点的click事件附加事件处理程序，如下所示:

  6. After clicking on the left hotspot, the previous image is displayed. In the click event handler for the left hotspot, first of all, the page is prevented from posting back using the following code:

    evt.preventDefault();

    为了确保图像在循环中显示，如果显示图像是第一个图像，它的前一个图像应该是数组中的最后一个图像。 因此，更新当前索引，如下所示:

    if (currIndex == minIndex) currIndex = maxIndex;

    对于所有其他的显示图像，当前的索引简单地通过1递减:

    else currIndex--;

    然后使用基本路径构建映像路径:

    var imgPath = basePath + imgArr[currIndex];

    然后图像控件的 source 属性被设置为前面的路径:

    $("#<%=imgMap.ClientID%>").prop("src",imgPath);

  7. After clicking on the right hotspot, the next image is displayed. In the click event handler for the right hotspot, first of all, the page is prevented from posting back using this code:

    evt.preventDefault();

    如果显示图像是最后一个图像，那么它的下一个图像应该是数组中的第一个图像，以确保图像在循环中显示。 因此，更新当前索引，如下所示:

    if (currIndex == maxIndex) currIndex = minIndex;

    对于所有其他显示图像，当前索引简单地增加1:

    else currIndex++;

    然后使用基本路径构建映像路径:

    var imgPath = basePath + imgArr[currIndex];

    然后图像控件的 source 属性被设置为前面的路径:

    $("#<%=imgMap.ClientID%>").prop("src",imgPath);

    这可以根据需要在循环中对图像进行正向或反向导航。

参见 also

使用 z-index 属性创建图片库

使用图像在菜单控件中创建效果

在第五章、中 ASP 的视觉效果.NET Sites，我们已经看到了 asp.net 如何 NET 菜单控件可以使用渐变和其他 CSS 效果进行动画的探索。 在本例中，让我们在 menu 控件的主菜单和子菜单项中使用图像而不是文本。 这些图像将在mouseover和mouseout事件上更新。 本例中使用的结构总结如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $(".class") | jQuery 选择器 | 它匹配指定 CSS 类的所有元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .indexOf (searchString, [startIndex]) | JavaScript 函数 | 这个返回从startIndex位置开始的给定字符串中searchString第一次出现的索引(可选)。 | | mouseout | jQuery 的事件 | 当鼠标指针离开控件时触发此操作。 它对应于 JavaScript 的mouseout事件。 | | mouseover | jQuery 的事件 | 当鼠标指针进入控件时触发。 它对应于 JavaScript 的mouseover事件。 | | .on() | jQuery 事件绑定 | 这将一个事件处理程序附加到一个或多个事件的匹配元素。 | | .prop(propertyName)或.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值。 | | .replace(subString, newString) | JavaScript 函数 | 这将所有出现的subString替换为newString。 | | .substring(startIndex, [endIndex]) | JavaScript 函数 | 它返回给定字符串的一个子字符串，从startIndex到endIndex或到字符串的末尾。 |

准备

让我们创建一个页面，使用图像在菜单控件中创建效果:

  1. 在这个例子中，让我们重新创建菜单，如在第五章，视觉效果在 ASP。 在动画菜单控件配方中的。NET Sites，但是这一次，使用的是图像而不是文本。 让我们从创建一个ASP 开始.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为Recipe6(或任何其他合适的名称)。
  2. 将 jQuery 库添加到项目中的Scripts文件夹中。
  3. 添加一个images文件夹，并在此文件夹中包含主菜单和子菜单项的图像。 另外，将相应菜单项的鼠标悬停图像添加到此文件夹中。 我们用来命名鼠标悬停图像的约定是*_mouseover.png。 例如，如果一个图像被命名为Home.png，那么其鼠标悬停图像将被命名为Home_mouseover.png。
  4. 添加一个新的 web 表单，并在表单中包含 jQuery 库。
  5. 通过导航到工具箱|导航部分，拖放菜单控件。

  6. 在表单中添加以下标记:

    <div id="container"> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"> <Items> <asp:MenuItem ImageUrl="~/images/Home.png"></asp:MenuItem> <asp:MenuItem ImageUrl="~/images/UserAccounts.png"> <asp:MenuItem ImageUrl="~/images/UserAccounts_1.png"></asp:MenuItem> <asp:MenuItem ImageUrl="~/images/UserAccounts_2.png"></asp:MenuItem> <asp:MenuItem ImageUrl="~/images/UserAccounts_3.png"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem ImageUrl="~/images/Reports.png"> <asp:MenuItem ImageUrl="~/images/Reports_1.png"></asp:MenuItem> <asp:MenuItem ImageUrl="~/images/Reports_2.png"></asp:MenuItem> <asp:MenuItem ImageUrl="~/images/Reports_3.png"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem ImageUrl="~/images/Settings.png"> <asp:MenuItem ImageUrl="~/images/Settings_1.png"></asp:MenuItem> <asp:MenuItem ImageUrl="~/images/Settings_2.png"></asp:MenuItem> </asp:MenuItem> </Items> </asp:Menu> </div>

  7. container``div区域的背景颜色使用如下样式:

  8. The ASP.NET engine renders the main menu items with a CSS class called level1 at runtime. Add the following styles to this class:

    ```

    Menu1 .level1{

    padding:0px; margin:0px; } ```

    注意事项

    注意，子菜单项是用一个名为level2的 CSS 类呈现的。

  9. Now, we will use jQuery to update the main menu image on mouseover, as shown in the following screenshot. On mouseout, the image is restored to the original one.

    Getting ready

    同样，在任意子菜单项上的mouseover上，相应的图像也会被更新，如下图所示:

    Getting ready

    在mouseout上，图像恢复到原来的图像，从而在菜单项上创建所需的视觉效果。

怎么做……

将下面的代码添加到页面的<script>块中:

<script type="text/javascript">
$(document).ready(function() {
  $(".level1 a img, .level2 a img").on("mouseover", function() var imageSource = $(this).prop("src");
    var pos = imageSource.indexOf(".");
    var strFileExt = imageSource.substring(pos, imageSource.length); imageSource = imageSource.replace(strFileExt, "_mouseover" + strFileExt); $(this).prop("src", imageSource);
  }); $(".level1 a img, .level2 a img").on("mouseout", function() {
  var imageSource = $(this).prop("src");
  imageSource = imageSource.replace("_mouseover", "");
  $(this).prop("src", imageSource);
});
});
</script>

How it works…

对 Menu 控件的影响如下:

  1. 在运行时，Menu 控件用level1CSS 类呈现主菜单项，用level2CSS 类呈现子菜单项。 因此，我们为level1和level2超链接图像绑定mouseover和mouseout事件的事件处理程序，如下所示:

  2. The mouseover event handler will display the mouseover image for that menu item. Assuming that when an image is named image.png, its corresponding mouseover image will be image_mouseover.png, and we first get the image source:

    var imageSource = $(this).prop("src");

    然后，确定图像的文件扩展名:

    var pos = imageSource.indexOf("."); var strFileExt = imageSource.substring(pos, imageSource.length);

    将原始文件扩展名替换为_mouseover字符串，后面跟着相应的文件扩展名。 例如，如果文件扩展名是.png，那么它在图像源字符串中被_mouseover.png替换:

    imageSource = imageSource.replace(strFileExt, "_mouseover" + strFileExt);

    现在，将图像源替换为这个更新后的图像源:

    $(this).prop("src", imageSource);

  3. When the mouse pointer moves out from the image, get the source of the image using the .prop() method as follows:

    var imageSource = $(this).prop("src");

    将_mouseover字符串替换为空字符串:

    imageSource = imageSource.replace("_mouseover", "");

    再次使用prop()方法更新图像源:

    $(this).prop("src", imageSource);

参见 also

预览图像在 MVCrecipe 中上传

创建 5 星评级控件

5 星评级控件是一个有用的功能，当您需要评论一个项目时，比如一本书、电影、产品等等。 在本例中，让我们使用 jQuery 创建这个应用作为一个 ASP.NET 用户控件。 本例中使用的结构如下:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | [attribute$= "value"] | jQuery 选择器 | 这将选择一个以"value"字符串结尾的指定属性的元素。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。 它对应于 JavaScript 的click事件。 | | .indexOf (searchString, [startIndex]) | JavaScript 函数 | 这将返回从startIndex位置开始的给定字符串中searchString第一次出现的索引(可选)。 | | .length | jQuery 的财产 | 这将返回 jQuery 对象中的元素数量。 | | .nextAll() | jQuery 方法 | 这将获得匹配元素的所有后续兄弟元素。 可以选择提供选择器。 | | .on() | jQuery 事件绑定 | 这将一个事件处理程序附加到一个或多个事件的匹配元素。 | | .prevAll() | jQuery 方法 | 这将获得匹配元素的所有前兄弟元素。 可以选择提供选择器。 | | .prop(propertyName)或.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值。 | | .text() | jQuery 方法 | 这将返回每个匹配元素的组合文本内容，或者设置每个匹配元素的文本内容。 |

准备

按照以下步骤创建一个页面与 5 星级评级控制:

  1. Let's create a page consisting of five star images arranged in a row. When the stars are unselected, they appear in a grey background, as shown in the following screenshot:

    Getting ready

    在点击一个特定的星星后，所有的星星图像，直到点击的图像被选择，并出现在一个金色的背景。 例如，如果我们点击第四颗星，前四颗星就会亮起来，显示评分为 4，如下图所示:

    Getting ready

    现在，如果你点击第一颗星星，从相反的方向开始，直到第一颗星星，所有的星星都将关闭，并显示 1 的评级，如下图所示:

    Getting ready

  2. 要创建此应用，请启动ASP.NET Web 应用项目在 Visual Studio 中使用空的模板，并将其命名为Recipe7(或其他合适的名称)。

  3. 将 jQuery 库添加到项目中的Scripts文件夹中。
  4. 在项目中添加一个images文件夹。 在这个文件夹中包含两种类型的图像，即一个灰色背景的星形图像和一个金色背景的星形图像。
  5. 添加一个 web 表单到项目中，并在表单中包含 jQuery 库。

  6. Since we want to create the 5-star rating system as a standalone control, add a Controls folder to the project. Now, right-click on this folder in the Solution Explorer tab and go to Add | New Item. From the dialog box that is launched, select Web Forms User Control and name the control RatingControl.acsx, as shown in the following screenshot. Click on the Add button.

    Getting ready

  7. 在Source模式下打开 controlRatingControl。 转到工具箱|Standard，在用户控件上拖放一个Panel控件。 在Panel控件中拖放五个Image控件。 另外，在Panel控件下面添加两个Label控件来显示当前的评级。 这将在用户控件中创建以下标记:

  8. 通过向system.web节点中的web.config文件添加以下代码来注册用户控件:

    <pages> <controls> <add tagPrefix="uc1" tagName="RatingControl" src="~/Controls/RatingControl.ascx"/> </controls> </pages>

  9. Now, open the web form in the Design or Source mode, and drag and drop the RatingControl control on the form area. This will add the following markup to the web form:

    <uc1:RatingControl runat="server" id="RatingControl" />

    另外，请注意下面的@Register指令被添加到页面中:

    <%@ Register Src="~/Controls/RatingControl.ascx" TagPrefix="uc1" TagName="RatingControl" %>

怎么做……

在用户控件的@Control指令后添加以下 jQuery 代码到<script>块:

<script type="text/javascript">
$(document).ready(function() {
  var BasePath = "images/";
  var greyImg = "star_grey.png";
  var goldImg = "star_golden.png";
  $("#<%=pnlImgContainer.ClientID%> img").on("click",
    function() {
      if ($(this).prop("src").indexOf(greyImg) > -1) {
        $(this).prop("src", BasePath + goldImg);
        $(this).prevAll("img").prop("src", BasePath + goldImg);
      } else {
        $(this).prop("src", BasePath + greyImg);
        $(this).nextAll("img").prop("src", BasePath + greyImg);
      }
      var rating = $("# <%=pnlImgContainer.ClientID%> img[src$='" + goldImg + "']").length;
      $("#<%=lblStarRating.ClientID%>").text(rating);
    });
});
</script>

How it works…

5 星级评级控制设计如下:

  1. 在 jQuery 代码中，设置图像的基本路径以及开启(金色背景)和关闭(灰色背景)图像的各自图像名称:

    var BasePath = "images/"; var greyImg = "star_grey.png"; var goldImg = "star_golden.png";

  2. 将一个点击事件处理程序附加到容器面板中的每个图像上，如下所示:

  3. 在前面的处理程序中，判断点击的图像是否为灰色背景图像，如下:

    if ($(this).prop("src").indexOf(greyImg) > -1)

  4. If the preceding condition is true, then update the clicked image to display the golden background image, as follows:

    $(this).prop("src", BasePath + goldImg);

    同时，将前面所有的图片也修改为金色背景图片:

    $(this).prevAll("img").prop("src", BasePath + goldImg);

  5. If the condition in step 3 is false, update the clicked image to display the grey background image, as follows:

    $(this).prop("src", BasePath + greyImg);

    同时，将后面的所有图像也更改为灰色背景图像:

    $(this).nextAll("img").prop("src", BasePath + greyImg);

  6. Determine the rating by counting the number of golden stars using the source property of each Image control:

    var rating = $("# <%=pnlImgContainer.ClientID%> img[src$='" + goldImg + "']").length;

    在页面上的 Label 控件中显示此评级:

    $("#<%=lblStarRating.ClientID%>").text(rating);

还有更多的…

由于评级控件是作为一个独立的用户控件实现的，所以它的多个实例可以添加到 web 表单中。 因此，在窗体上拖放另一个实例，这样页面上就有两个这样的控件:

<uc1:RatingControl runat="server" id="RatingControl" />
<uc1:RatingControl runat="server" id="RatingControl2" />

该页面现在将显示两个独立的控件，如下面的截图所示。 每个控件都可以独立使用。

There's more…

参见 also

预览图像在 MVCrecipe 中上传

在 MVC 中预览图像上传

在这个示例中，让我们创建一个 MVC 应用，它可以在将图像上传到服务器之前使用客户端脚本预览图像。 注意，此菜谱仅覆盖客户机脚本，并没有处理用于上传的服务器代码。 下表显示了本例中使用的构造的快速摘要:

|

构造

|

类型

|

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | 或.attr("name", "value") | jQuery 方法 | 这将返回一个具有匹配元素所需属性值的字符串。 它还可以用于将属性设置为所需的值。 | | change | jQuery 的事件 | 当元素的值发生变化时，将触发。 它对应于 JavaScript 的change事件。 | | FileReader.onloadend | FileReader 接口提供的事件处理程序 | 此定义了loadend事件的事件处理程序。 它在每次事件完成时执行。 | | FileReader.readAsDataUrl() | FileReader 接口提供的方法 | 它读取文件或 blob(不可变原始数据的类文件对象)的内容。 读取完成后，result 属性返回已读取文件数据的 URL。 | | FileUpload.files | 文件列表对象 | 从 file upload 元素中选择的文件作为FileList对象返回。 | | FileUpload.files.length | FileList 对象的属性 | 这是FileList对象中的文件数。 | | FileUpload.file.type | FileList 对象的属性 | 这将返回给定文件对象的文件类型。 | | .match(regexp) | JavaScript 函数 | 它将字符串与正则表达式相匹配。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | window.File | 文件 API 提供的接口 | 这提供了文件的信息属性，例如名称、最后修改日期等等。 | | window.FileReader | 文件 API 提供的接口 | 这允许读取文件或 blob(不可变原始数据的类文件对象)的内容。 |

准备

按照以下步骤构建一个图像预览的 MVC 应用:

  1. Let's create an MVC application with an image preview area and file upload control, as shown in the following screenshot:

    Getting ready

  2. On browsing and selecting an image file, a preview of the image can be seen in the shaded area on the page, as shown in the following screenshot:

    Getting ready

  3. To create the preceding page, launch a new ASP.NET Web Application project in Visual Studio. Select the Empty template and ensure that the MVC checkbox is selected, as shown in the following screenshot. Name the application Recipe8 (or any other suitable name).

    Getting ready

  4. ASP.NET 自动使用 jQuery 库文件将Scripts文件夹添加到 MVC 项目中。 您可以保留这些文件，也可以将它们替换为最新版本。

  5. Right-click on the Controllers folder in the project and go to Add | Controller. From the dialog box that opens up, select MVC5 Controller – Empty, and then click on the Add button, as shown in the following screenshot:

    Getting ready

  6. 控制器名称控制器名称DefaultController。 默认情况下，Visual Studio 将Index ActionResult添加到控制器。

  7. In the Solution Explorer tab, right-click by navigating to Views | Default and go to Add | View. Enter Index for the View name, and click on the Add button on the Add View dialog box, as shown in the following screenshot. Note that the Template selected is Empty (without model):

    Getting ready

  8. 添加一个图像元素和一个文件上传元素到视图。 此外，还包括 jQuery 库。 因此，视图的标记如下:

    <h2>Preview a file using upload control</h2> <script src="~/Scripts/jquery-2.1.4.js"></script> <div> <img id="imgPreview" alt="Preview your image here" width="400" height="300" /><br/><br/> <input type="file" id="FileUpload1" /> </div>

  9. 通过添加以下样式，为前面的图像元素包含背景色:

怎么做……

将以下 jQuery 代码添加到视图的<script>块中:

<script type="text/javascript">
$(document).ready(function() {
  $("#FileUpload1").on("change", function() {
    if (this.files.length == 0) {
      alert("No image is selected");
      return;
    }
    if (!window.File || !window.FileReader) {
      alert("File API is not supported in this browser");
      return;
    }
    if (this.files[0].type.match("image.*")) {
      var reader = new FileReader();
      reader.readAsDataURL(this.files[0]);
      reader.onloadend = function() {
        $("#imgPreview").attr("src", this.result);
      }
    }
  });
});
</script>

How it works…

图像预览工作如下:

  1. 要运行应用，在解决方案资源管理器选项卡中，右键单击视图|Default|索引。 cshtml，点击在浏览器中查看。 在浏览器中成功加载页面后，浏览需要上传的图像文件。 该页面将在预览区显示图像。

  2. This is accomplished by attaching an event hander for the change event of the file upload control, as follows:

    $("#FileUpload1").on("change", function () {…});

    每次在文件上传控件中浏览和选择文件时触发此事件。

  3. 在前面的处理程序中，首先，我们检查文件上传控件是否返回一个空对象，如下所示:

  4. 其次，我们还需要验证浏览器是否支持File API。 这可以通过以下检查来完成:

    if (!window.File || !window.FileReader) { alert("File API is not supported in this browser"); return; }

  5. Next, check whether the selected file is an image or not using a regular expression on the file type:

    if (this.files[0].type.match("image.*"))

    注意事项

    由于 file upload 元素返回一个FileList对象，我们可以使用index 0选择第一个文件，即files[0]。 然后匹配文件类型上的正则表达式image.*，只过滤图像文件。

    如果选择的文件是映像文件，则创建一个FileReader对象来读取该文件:

    var reader = new FileReader();

    现在，使用FileReader对象，读取文件的内容:

    reader.readAsDataURL(this.files[0]);

    为loadend事件编写事件处理程序。 这将在文件被完全读取后执行:

    reader.onloadend = function () {…}

    在前面的事件处理程序中，由于 result 属性包含文件数据的 URL，我们可以将图像元素的源属性设置为该 URL，如下所示:

    $("#imgPreview").attr("src", this.result);

参见 also

使用图像在菜单控件配方中创建效果

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/31276.html