65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 jQuery 和 MVC 加载 Base64 图像

李松博士
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.92/5 (9投票s)

2011 年 5 月 26 日

CPOL

3分钟阅读

viewsIcon

133039

downloadIcon

2198

这篇简短的文章介绍了一个使用 jQuery 和 MVC 加载 Base64 图片的示例。

引言

这篇简短的文章介绍了一个使用 Base64 格式的图片，通过 jQuery 和 MVC 加载的示例。

背景

这不是最高效的方式，但您可能会发现以 "Base64" 格式加载图片在某些情况下可以为您带来便利。您可以以编程方式将图片缓存在内存或浏览器的 "本地存储" 中，一旦图片加载完成，就可以选择性地显示它们，而无需访问服务器。本文介绍了一个使用 "jQuery" 和 "MVC" 加载 Base64 格式图片的方法。

SolutionExplorer.jpg

附带的 Visual Studio 解决方案是在 Visual Studio 2010 中开发的。它包含一个 MVC 2 Web 应用程序 "Base64Img"。此处使用的 "jQuery" 版本是 "1.6.1"。

  • "Index.aspx" 是这个小型应用程序的唯一视图。
  • "HomeController.cs" 实现了一个加载 "Index.aspx" 页面的控制器。
  • "ImageController.cs" 实现了一个加载图片的控制器。
  • "Tiger.jpg" 是要通过 "ImageController" 以 "Base64" 格式加载到 "Index.aspx" 页面的图片，使用的是 "jQuery"。

我将首先介绍控制器，然后介绍 "Index.aspx" 页面，向您展示 "Base64" 图片是如何加载和显示在浏览器中的。

MVC 控制器

"HomeController" 的唯一功能在 "HomeController.cs" 中实现，即加载 "Index.aspx" 页面。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Base64Img.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
    }
}

"ImageController.cs" 实现了一个加载图片并将图片以 "Base64" 格式发送到 Web 浏览器的控制器。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
 
namespace Base64Img.Controllers
{
    public class ImageController : Controller
    {
        [HttpGet]
        public ActionResult GetBase64Image()
        {
            string path 
                = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Images")
                 + "\\" + "Tiger.jpg";
 
            FileStream fileStream = new FileStream(path, FileMode.Open, FileAccess.Read);
            byte[] data = new byte[(int)fileStream.Length];
            fileStream.Read(data, 0, data.Length);
 
            return Json(new { base64imgage =  Convert.ToBase64String(data) }
                , JsonRequestBehavior.AllowGet);
        } 
    }
}

"GetBase64Image" 操作方法不接受任何参数，它读取位于 "Images" 文件夹中的图片文件，并将其转换为 "Base64" 格式。然后，它将图片作为 "JsonResult" 发送到浏览器。

"Index.aspx" 视图

此 MVC 2 应用程序的唯一视图页面在 "Index.aspx" 文件中实现。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Base64 Image Loader</title>
<link rel="stylesheet"
        href="<%: Url.Content("~/Content/Styles/Site.css") %>" />
<script
    src="<%: Url.Content("~/Content/Scripts/jquery-1.6.1.min.js") %>"
    type="text/javascript">
</script>
 
<script language="javascript" type="text/javascript">
    var imageUrl
        = "<%: Url.Action("GetBase64Image", "Image") %>";
    var imgs = null;
 
    $(document).ready(function () {
        if ($.browser.msie) {
            var browserMsg
                 = "Your browser does not support Base64 image"
            $("#divBrowserInfo").html(browserMsg);
 
            $("#btnClearImage").attr("disabled", true);
            $("#btnLoadImage").attr("disabled", true);
        }
 
        var displayImage = function (base64Data) {
            var imag = "<img "
                     + "src='" + "data:image/jpg;base64,"
                     + base64Data + "'/>";
 
            $("#divImageHolder").html(imag)
        };
 
        $("#btnLoadImage").click(function () {
            if (imgs != null) {
                displayImage(imgs.base64imgage);
                return;
            }
 
            $.ajax({
                cache: false,
                type: "GET",
                url: imageUrl,
                contentType: 'application/json',
                dataType: "json",
                success: function (data) {
                    imgs = data;
                    displayImage(imgs.base64imgage);
                },
                error: function (xhr) {
                    alert("Error occurred while loading the image. "
                        + xhr.responseText);
                }
            });
        });
 
        $("#btnClearImage").click(function () {
            $("#divImageHolder").html("");
        });
    });
</script>
</head>
 
<body>
    <div id="divBrowserInfo"></div>
    <div id="divImageHolder"></div>
    <div>
        <button id="btnClearImage">
            Clear Image</button>
        <button id="btnLoadImage">
            Load Base64 Image</button>
    </div>
</body>
</html>

"Index.aspx" 页面包含两个按钮控件。

  • 单击 "Load Base64 Image" 按钮会触发 "Base64" 图片的加载和显示。
  • 单击 "Clear Image" 按钮会从 Web 浏览器中清除图片。

在加载图片之前，"JavaScript" 代码会首先检查图片是否已加载。如果已加载，它将直接显示已加载的图片。如果未加载，它将发起一个 "Ajax" 请求到 "ImageController" 控制器进行加载。由于某些版本的 "Internet Explorer" 不支持显示 "Base64" 编码的图片，如果用户使用的是 "Internet Explorer"，我将显示 "您的浏览器不支持 Base64 图片" 的消息并禁用按钮。

运行应用程序

现在我们完成了这个小程序，可以运行该应用程序了。下面是在 "Safari" 中显示的 Web 应用程序。

RunAppStart.jpg

单击 "Load Base64 Image" 按钮，"jQuery" "Ajax" 请求将从 "ImageController " 检索 "Base64" 格式的图片并在浏览器中显示它。

RunAppPicLoad.jpg

如果您单击 "Clear Image" 按钮清除图片，然后再次单击 "Load Base64 Image"，您可能会注意到老虎图片显示得更快，因为 "Base64" 数据已加载，并且 "JavaScript" 代码只是显示缓存的图片，而无需再次发起 "Ajax" 请求。

关注点

  • 这篇简短的文章介绍了一个使用 "jQuery" 和 "MVC" 加载 Base64 图片的方法。
  • 这个小程序演示了以下技术：
    • 如何在 MVC 控制器中创建一个操作方法，将 "Json" 对象发送到浏览器。
    • 如何使用 "jQuery" "Ajax" 请求来访问操作方法以加载 "Json" 对象。
    • 如何查找服务器上文件的正确路径以及如何读取文件。
    • 如何将二进制数据转换为 "Base64" 格式。
    • 如何使用 "jQuery" 显示使用 "Base64" 数据的图片。
    • 如何使用 "jQuery" 识别浏览器类型。

我希望您喜欢我的帖子，并希望本文能在某种程度上帮助到您。

历史

这是本文的第一个修订版。

© . All rights reserved.