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

轻松将图像上传到网络的简便方法

Aurigma
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.25/5 (3投票s)

2009年8月8日

CPOL

6分钟阅读

viewsIcon

32969

本文介绍了如何组织图片上传。我们提供了一种有效上传图像的解决方案，可以减少入站流量，节省服务器资源和磁盘空间。

为什么图片上传如此重要

如今，几乎所有的网站都会接收照片和其他图像。当您想与朋友分享上周末的照片时，您会访问您的社交网络账户并发布照片。如果您想出售您的汽车，您会提交描述和规格到“二手车出售”版块。但是，如果没有看到汽车的在线照片，没有人会打电话给您。因此，您会拿起相机，并从最佳角度努力拍摄一些外部和内部照片。然后，您会连同广告信息一起上传照片。这样，每天有数百万张数码照片被上传并分享到网络上。

上传图像时，您会非常希望有一个方便的用户界面。能够浏览文件夹、选择多张图像并一键上传，那就太好了。之后，能够跟踪上传进度并检查还需要多长时间才能完成上传，那就更棒了。

可以从 http://aurigma.com/Products/ImageUploader/FreeTrial.aspx 下载 Aurigma Image Uploader 的免费试用版。

开发支持图像的网站

从 Web 应用程序开发人员的角度来看，情况要复杂得多。在这里，我们需要一个跨浏览器上传解决方案，并具备一些图像特定功能。让我们更详细地考虑一下。

作为 Web 开发人员，我们都知道跨浏览器支持是什么，以及它会带来多少麻烦。创建可在所有浏览器和平台上运行的用户界面需要专业知识和大量的测试。

与照片上传相关的另一个重要功能是图像处理。在大多数情况下，上传照片的过程在照片被服务器接收后并不会立即完成。网站逻辑可能需要服务器端对接收到的图像应用额外的处理。

例如，如果全尺寸图像仅用于预览目的，则通常没有必要将其存储在服务器端。使用缩略图而不是全尺寸图片可以节省磁盘存储空间，并减少用户浏览网站图片时产生的出站流量。此外，出于版权考虑，您可能需要为网站上存储的所有图像添加水印。

很明显，图像处理的实现需要一定的专业知识。您需要编写额外的代码，进行调试和测试。另一点是，图像处理是一项耗费性能的操作，需要大量的内存和 CPU 资源。

客户端图像处理

针对上述所有问题的一个简单解决方案是在将照片发送到服务器之前，在客户端执行所有与图像相关的操作。这样，您不仅节省了服务器资源和出站流量，还节省了入站流量。例如，我们有一张 6 百万像素的 JPEG 压缩图像。文件大小约为 1.5 MB。Web 应用程序不存储全尺寸图像，并需要 800x800 像素的缩小副本。如果我们先在客户端调整图像大小然后再上传，其大小将约为 150 KB。我们刚刚将服务器接收到的文件大小减小了 10 倍！

Aurigma Image Uploader

Aurigma Inc. 提供了一个解决方案，可以进行上传，并具有在发送图像之前准备图像的其他功能 - Aurigma Image Uploader。

从技术角度来看，该上传器本质上是一个客户端 ActiveX 控件和一个 Java applet，它们实现了所有与上传相关的功能。使用 Aurigma Image Uploader，网站用户将获得一个易于使用且外观精美的上传用户界面。上传窗格使用户能够选择任何类型的图像和文件，并一键上传。用户点击“发送”按钮后，Aurigma Image Uploader 将应用预配置的图像转换（如果有），准备一个标准的 HTTP POST 请求，并将其发送到指定的服务器页面。这样，您就不需要创建特殊的服务器处理程序，打开额外的端口等。您的 Web 服务器仅充当 Aurigma Image Uploader 的服务器端。

同时存在 ActiveX 控件和 Java applet 确保了跨浏览器和跨平台的兼容性。无论您的客户端运行的是 Microsoft Windows、Mac OS X 还是 Linux，以及使用 Internet Explorer、Safari、Firefox、Google Chrome 或其他浏览器。Aurigma Image Uploader 会实例化相应的客户端控件（ActiveX 控件或 Java applet）并在网页上显示它。

Aurigma Image Uploader 的核心是 ActiveX 控件、Java applet 和将它们嵌入 HTML 的 JavaScript 框架。这样，JavaScript 框架以一致的方式配置控件并处理客户端事件。此外，Aurigma Image Uploader 还提供了针对大多数流行服务器平台 ASP.NET 和 PHP 的专用包装器。它们使开发人员能够以直接的方式使用 Aurigma Image Uploader，就像使用另一个 ASP.NET 服务器控件或 PHP 模块一样。ASP.NET 控件允许在 Visual Studio 的设计模式（WYSIWYG）下嵌入和配置上传控件。

现在，让我们开始编码。文章的其余部分将通过一个示例，演示如何将 Aurigma Image Uploader 嵌入 ASP.NET 页面并将其配置为发送缩小后的图像副本。

在 ASP.NET 中实现支持图像的上传

假设我们开发一个简单的照片库，要求用户为每张选择上传的照片上传两个缩小副本：120x120 像素和 800x800 像素。第一个用于浏览，第二个用于大预览。为了完成这项任务，我们可以将其分解如下：

  1. 启动 Visual Studio 2008，然后从菜单中选择**文件** -> **新建** -> **网站…**。选择 ASP.NET Web Site，并指定我们将使用的语言。在此示例中，我们将使用 C#。
  2. 添加对 Aurigma Image Uploader ASP.NET 控件的引用，该控件可以在 Aurigma Image Uploader 安装包 (Aurigma.ImageUploader.dll) 中找到。
  3. 在编辑器中打开 default.aspx。在页面上添加 Image Uploader ASP.NET 控件。
    4. <%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Aurigma.ImageUploader" 
             Namespace="Aurigma.ImageUploader" TagPrefix="cc1" %>
<!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>Simple Photo Gallery</title>
    <style type="text/css">
        .ScreenStyle
        {
            background-color: #ffffff;
            font-family: verdana;
            font-size: 11px;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ImageUploader ID="ImageUploader1" runat="server" Height="500" 
        Width="700" OnFileUploaded="ImageUploader1_FileUploaded"
        UploadThumbnail1FitMode="Fit" UploadThumbnail1Width="120" 
        UploadThumbnail1Height="120" UploadThumbnail2FitMode="Fit" 
        UploadThumbnail2Width="800" UploadThumbnail2Height="800"
        UploadSourceFile="false" RedirectUrl="Gallery.aspx">
       <InstallationProgress Visible="True" ProgressCssClass="ScreenStyle" 
                             InstructionsCssClass="ScreenStyle" />
    </cc1:ImageUploader>
    </form>
</body>
</html>

    在我们的示例中，我们将 Image Uploader 配置为禁用发送未调整大小（即“源”）文件，启用上传两个缩略图（120x120 像素和 800x800 像素），指定一个接收上传文件的服务器事件处理程序 (ImageUploader1_FileUploaded)，并指向上传完成后用户将被重定向到的页面。重定向页面将是我们的显示上传文件的画廊。这是我们在 Firefox 3.5 中打开的带有 Image Uploader（Java applet）的页面外观。

    此外，我们还想重点介绍安装进度功能。此功能允许在 Image Uploader 在客户端计算机上初始化和安装时向用户显示一个特殊的信息屏幕。在我们的示例中，我们使用 ImageUploader.InstallationProgress 属性设置了此功能。请注意，我们为该屏幕创建了一个 CSS 样式 (ScreenStyle) 并在 InstallationProgress 设置中指定了它。上面的屏幕显示了 Image Uploader Java 正在初始化时 Firefox 中的 InstallationProgress。

  4. 这是代码隐藏文件 Default.aspx，其中包含获取从客户端上传的所有文件的处理程序方法 (ImageUploader1_FileUploaded)。此方法为每个上传的文件调用一次。我们从客户端获取两个缩略图，并将它们保存到服务器上的相应文件夹中。
    5. public partial class _Default : System.Web.UI.Page 
{
   protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void ImageUploader1_FileUploaded(object sender, 
                   Aurigma.ImageUploader.FileUploadEventArgs e)
    {
        string galleryPath = "Gallery/";
        string previewPath = galleryPath + "Thumbnails1/";
        string largePreviewPath = galleryPath + "Thumbnails2/";

        Aurigma.ImageUploader.ThumbnailInfo thumbnail1 = e.Thumbnails[1];
        Aurigma.ImageUploader.ThumbnailInfo thumbnail2 = e.Thumbnails[2];

        string safeFileName = 
          thumbnail1.GetSafeFileName(Server.MapPath(previewPath));

        thumbnail1.Save(Server.MapPath(previewPath + safeFileName));
        thumbnail2.Save(Server.MapPath(largePreviewPath + safeFileName));
    }
}
  5. 最后一步是我们的显示上传文件的画廊。页面和代码非常简单。
    6. <%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Gallery.aspx.cs" Inherits="Gallery" %>

<!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 id="Head1" runat="server">
    <title>Simple Photo Gallery</title>
</head>
<body>
    <asp:DataList ID="_dataList" Width="100%" RepeatLayout="Table" 
                  RepeatDirection="Vertical" RepeatColumns="4" runat="server">
        <HeaderTemplate>
            Simple Photo Gallery
        </HeaderTemplate>
        <ItemTemplate>
            <a href="<%# _largePreviewPath + 
                  System.IO.Path.GetFileName(Container.DataItem.ToString()) %>"
                target="_blank">
                <img src="<%# _previewPath + 
                  System.IO.Path.GetFileName(Container.DataItem.ToString()) %>" />
            </a>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
    </asp:DataList>
</body>
</html>

    代码

    public partial class Gallery : System.Web.UI.Page
{
    protected string _galleryPath = "Gallery/";
    protected string _previewPath;
    protected string _largePreviewPath;

    protected void Page_Load(object sender, System.EventArgs e)
    {
        _previewPath = _galleryPath + "Thumbnails1/";
        _largePreviewPath = _galleryPath + "Thumbnails2/";

        _dataList.DataSource = 
           System.IO.Directory.GetFiles(Server.MapPath(_previewPath));
        _dataList.DataBind();
    }
}

就是这样！现在我们可以打开我们的画廊并上传一些照片了。

摘要

本文仅介绍了 Aurigma Image Uploader 支持的一小部分功能。如果您对图像上传感兴趣，我们建议您查阅 Aurigma Image Uploader 文档，网址为 http://image-uploader-docs.aurigma.com/Docs/ImageUploader/Overview.htm。在那里您可以找到关于该产品的详细信息。

可以从我们的网站 http://aurigma.com/Products/ImageUploader/FreeTrial.aspx 下载 Aurigma Image Uploader 的免费试用版。

© . All rights reserved.