Brettb.Com
  HOME | ABOUT ME | BIOTECHNOLOGY | ARTICLES | GALLERY | CONTACT
Search: Go
TECHNICAL ARTICLES
 ASP
 ASP.NET
 JavaScript
 Transact SQL
 Other Articles
 Software Reviews

PHOTO GALLERIES
 Canon EOS 300D Samples
 Akihabara Maids!
 More Galleries...

TRAVEL LOG
 2009: China
 2008: Tokyo
 2007: Tokyo
 2006: Hong Kong
 2005: New York City

MORE STUFF
 Search Engine Optimisation
 Build an ASP Search Engine
 My Tropical Fishtank
 Autoglass
 SQL Month Name
 SQL Get Date Today
 SQL Year Month
 Other New Stuff...

POPULAR STUFF
 Regular Expressions
 Index Server & ASP
 JavaScript Ad Rotator

Home > ASP.NET Articles

Determining the Dimensions of Uploaded Images in ASP.NET

This article how to describes how to determine the width and height of an image after it has been uploaded to a web server using the file upload facilities within the .NET Framework of ASP.NET.

Determining image dimensions can be useful in a number of situations. One of the most useful is to ensure that users of a web application such as a content management system do not upload massive 4000 x 3000 pixel images for display on their pages! If large images are uploaded, then the user could be informed that they should resize the image. Alternatively using some of the other image handling facilities in the .NET Framework it would be possible to build in some sort of automatic image resizing functionality.

Building the Upload Form

The upload form is a standard ASP.NET form - the HTML is shown below.

Note that for a file uploading form, the Form tag must have the encType="multipart/form-data" attribute. There should also be an Input web control with its Type attribute set to file. Finally the form will also need a submit button, which in this example has the ID of ButtonUpload.

<form id="UploadImage" method="post" encType="multipart/form-data" runat="server">
<p>Choose an image file from your machine:
<br>
    <INPUT id="UploadedPicture" type="file" name="UploadedPicture" runat="server">
<br>
<asp:button id="ButtonUpload" runat="server" Text="Upload This Image"></asp:button>
</p>
</form>

Creating the Upload Event Handler

The click event of the ButtonUpload button will handle the uploading of the image and the subsequent operations to determine the size of the uploaded picture. The code for this is show in both C# and VB.NET.

C# Code for Image Uploading

The code for the event handler is shown below. The UploadedPicture.PostedFile object can be used to interrogated to find out about the uploaded image. It contains a number of properties. For example, the string UploadedPicture.PostedFile.FileName contains the filename of the uploaded file.

The UploadedPicture.PostedFile.ContentType property is also worth interrogating as it contains information about the type of file uploaded. For security and data integrity reasons it is a good idea to only specifically allow the uploading of specific file types. Uploaded JPEGs will have the ContentType property of image/gif, JPEGs will either have image/jpeg or image/pjpeg.

To determine the dimensions of the uploaded image, a System.Drawing.Image object is created from the uploaded image's input stream, i.e. UploadedPicture.PostedFile.InputStream. The image's properties can then be used to determine its dimensions - PhysicalDimension.Width and PhysicalDimension.Height in the case of image width and height.

Note that determining the dimensions of an image works for most JPEGs and GIFs, but there is no guarantee that it will work with other image formats. As always, production code should have plenty of exception handling added!

private void ButtonUpload_Click(object sender, System.EventArgs e)  {

    //Determine type and filename of uploaded image
    string UploadedImageType = UploadedPicture.PostedFile.ContentType.ToString().ToLower();
    string UploadedImageFileName = UploadedPicture.PostedFile.FileName;

    //Create an image object from the uploaded file
    System.Drawing.Image UploadedImage = System.Drawing.Image.FromStream(UploadedPicture.PostedFile.InputStream);

    //Determine width and height of uploaded image
    float UploadedImageWidth = UploadedImage.PhysicalDimension.Width;
    float UploadedImageHeight = UploadedImage.PhysicalDimension.Height;

    //Check that image does not exceed maximum dimension settings
    if (UploadedImageWidth > 600 || UploadedImageHeight > 400) {
            Response.Write("This image is too big - please resize it!");
    }

}

VB.NET Code for Image Uploading

Private Sub ButtonUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs)

    'Determine type and filename of uploaded image
    Dim UploadedImageType As String = UploadedPicture.PostedFile.ContentType.ToString().ToLower()
    Dim UploadedImageFileName As String = UploadedPicture.PostedFile.FileName

    'Create an image object from the uploaded file
    Dim UploadedImage As System.Drawing.Image = System.Drawing.Image.FromStream(UploadedPicture.PostedFile.InputStream)

    'Determine width and height of uploaded image
    Dim UploadedImageWidth As single = UploadedImage.PhysicalDimension.Width
    Dim UploadedImageHeight As single = UploadedImage.PhysicalDimension.Height

   'Check that image does not exceed maximum dimension settings
    If UploadedImageWidth > 600 Or UploadedImageHeight > 400 Then
        Response.Write("This image is too big - please resize it!")
    End If

End Sub

  Site Map | Privacy Policy

All content is 1995 - 2012