Many programmers are discovering the need for a more efficient way to handle images for larger web sites. eCommerce, realty, and other types of sites use from hundreds to thousands of images, often stored on the hosting server's hard drive. As these sites become larger, they need a better method of storage—for both performance and administrative reasons. If the web site is busy accessing pictures from the hard drive or logical drive, your server becomes less responsive due to increased disk activity. Even worse, the drive becomes fragmented faster. In a clustered server scenario, where the servers are load-balanced, you still have to maintain an identical copy of the images on each server, causing tedious administration.
The best way to load images is by using a database. With this strategy, you increase performance by having user requests for images occur simultaneously instead of sequentially from the hard disk. You also have a centralized location for the images, making load-balancing easier. In this article, I'll show how you can load images into an SQL Server database from a web page by using C#.
The Upload Script
The script in Listing 1 allows you or your users to upload images to the database one at a time. With traditional ASP, we had to use a registered component (DLL) to get the job done. Now, with .NET, it's all built into the language and supported; we only need to know which namespaces to use. This script also uses a code-behind (.cs) script to do all the meaningful work. (I'll cover that script next.) The script in Listing 1 contains only two fields: one for a friendly image name and the other for the actual image.
Listing 1 User page for uploading images
1 <%@ Page language="c#" Src="UploadImage.aspx.cs" Inherits="DBImages.UploadImage" %> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 3 <HTML> 4 <body bgcolor=#ffffff> 5 <form enctype="multipart/form-data" runat=server id=form1 name=form1> 6 <h3>Upload your Image</h3> 7 Enter A Friendly Name<input type=text id=txtImgName runat="server" > 8 <asp:RequiredFieldValidator id=RequiredFieldValidator1 runat="server" ErrorMessage="Required" ControlToValidate="txtImgName"></asp:RequiredFieldValidator> 9 <br>Select File To Upload: 10 <input id="UploadFile" type=file runat=server> 11 <asp:button id=UploadBtn Text="Upload Me!" OnClick="UploadBtn_Click" runat="server"></asp:button> 12 </form> 13 </body> 14 </HTML>
Line 1 loads our code-behind script, called UploadImage.aspx.cs (discussed in the next section). Line 5 uses the "multipart/form-data" encoding type for the <form> tag, telling the browser that a large amount of binary (image) data will be returned by the form. Line 8 uses the .NET RequiredFieldValidator web control. It requires the user to enter a friendly name for the image. If the user attempts to leave this field blank, the script will tell the user that a friendly name is required. Depending on what you're using the script to do, you may not even need the information in this field; it simply provides a reference to the images in a more friendly context, such as for an image library or picture album.
Line 10 uses the HtmlInputFile control. This control is part of the HTML controls library for .NET and is basically a fancy text box control that contains a Browse button; it knows that the value it will receive is a binary file. Line 11 is the Button web control, which calls a function named UploadBTn_Click when the button for the control is clicked.
Save this script using any name you want; for example, UploadImage.aspx.