ImageIsland
AudioIsland
VideoIsland
MediaIsland
How to Upload Photos to a Website
You may be looking for a way to upload your photos to your website. We have provided a sample code page below that will allow you to create a photo upload web page on your website. After you create this simple webpage on your server, you and your users will be able to upload photos and images online.
Below is a screen shot of a sample photo upload webpage. All a user has to do is click to browse photos on their desktop computer, then click the upload button to upload the image and display it on the same webpage. This what the sample photo upload webpage looks like:
This is what the photo upload webpage looks like after a user uploads their photo:
To run this code page, you will need a Windows Server. You also will need to create an ASPX webpage from the code below, and paste the code into it. To do that, just create a page using Notepad or a text editor, call it something (like "upload.aspx") with the ASPX extension, and then upload to a location on your website or server. Be sure to set the "variables" in the code so the paths are correct. You may need to add an empty image file (like a "spacer.gif" or jpg image) also for the "stub" or default image in the display. Next you will need to make sure you give your server page the "permissions" to write your uploaded files to the server. And finally, you should consider hiding this file, or better yet, create some secure system to prevent others from accessing this page, as it will allow anyone to upload photos and images to your server. Otherwise, just add that to your server, and you are ready to go!
Sample Photo Upload Code Below:
(HOW TO UPLOAD A PHOTO TO A WEBSITE - CODE SAMPLE BELOW - Paste the code below into an ASP.NET webpage on your server)
<%@ Page Language="c#" AutoEventWireup="true" EnableViewState="false" %>
<%@import namespace="System.IO" %>
<%@import namespace="System.Web.UI.HtmlControls" %>
<!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" xml:lang="en">
<head>
<title>GiantIsland.com Sample Photo Upload Code</title>
<meta name="description" content="GiantIsland.com Sample Photo Upload Code" />
<meta name="copyright" content="GiantIsland.com, copyright 2010" />
<meta name="author" content="GiantIsland.com, http://www.GiantIsland.com/" />
<meta name="classification" content="business" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="distribution" content="global" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<script language="C#" runat="server">
// FIRST, SET THESE SERVER VARIABLES AS YOU LIKE...
// Set your Upload Folder Path. If left blank, it will upload the file to the webroot, or root or main folder of your website. You can enter a subfolder instead, if you have one setup under your webroot. Example: "/MyPhotos/". If you have set up a WebApplication subfolders on your server, it will use that as the webroot, and then apply your folder path to it.
string UploadFolderPath = "";//default upload location is webroot
// Add an empty image or sample image to the image control in the webpage. This image will be replaced by your uploaded image in the browser. Note: The path to this file is the same as the upload image path you set above.
string EmptyImageName = "spacer.gif";
// Now go to the bottom of this page to set the "file extensions" or type of file you want to upload (you set the file types in the RegularExpressionValidator below). You can set it for Photos, like .JPG and .PNG or others. Just remember, most browsers only support JPG, GIF, PNG and BMP file types.
// Leave these as is...
string SystemFilePath = "";
public void Page_Load(object ob, System.EventArgs ev)
{
// First make sure all paths are setup correctly.
if (Request.ApplicationPath == "/")
{
if (UploadFolderPath == "")
{
SystemFilePath = "/";
}
else
{
SystemFilePath = UploadFolderPath;
}
}
else
{
SystemFilePath = Request.ApplicationPath + UploadFolderPath;
}
this.UploadedPhotoDisplay.Src = SystemFilePath + EmptyImageName;
}
void UploadFile(object ob, EventArgs ev)
{
// Make sure all form fields have valid information.
if (Page.IsValid)
{
string UploadedFileNameOnServer = System.IO.Path.GetFileName(UploadFileInput.PostedFile.FileName);
string PhysicalServerFileLocation = Server.MapPath(SystemFilePath);
string FinalFilePath = PhysicalServerFileLocation + UploadedFileNameOnServer;
if(UploadFileInput.PostedFile != null && UploadedFileNameOnServer != "")
{
try
{
//Post file and Success Message.
UploadFileInput.PostedFile.SaveAs(FinalFilePath);
OutputMessage.InnerHtml = "<strong>File uploaded successfully! Thank You!</strong> (Your File Name: " + UploadedFileNameOnServer + ")<hr />";
// If file is an image, update hidden spacer image with image for preview.
if (UploadFileInput.PostedFile.ContentType.IndexOf("image") >= 0) //check if its image file
{
//Assign image properties dynamically on successful upload.
this.UploadedPhotoDisplay.Src = SystemFilePath + UploadedFileNameOnServer;
this.UploadedPhotoDisplay.Border = 1;
this.UploadedPhotoDisplay.Align = "left";
this.UploadedPhotoDisplay.Alt = "My Uploaded Photo";
}
}
catch (Exception e)
{
// If server exception is thrown by .NET, show that below. You can comment this out if you dont want to show this. Of you can add in your own text message for your users.
OutputMessage.InnerHtml = "Error: There was a Server Error saving your photo named '" + UploadedFileNameOnServer + "'<br />Server Error: " + e.ToString() + "<hr />";
}
}
else
{
// If the file failed for any reason, or empty image or code was uploaded, this message will be shown. You can change this as you like.
OutputMessage.InnerHtml = "Your photo was not uploaded: Please choose a different file to upload, or try again.<hr />";
}
}
}
</script>
</head>
<body>
<form enctype="multipart/form-data" runat="server" id="Form1">
<span id="OutputMessage" runat="server" />
<%-- Customize what file formats you accept in the code validator below. So, be sure to use the extension validator below. --%>
<asp:regularexpressionvalidator runat="server" errormessage="<strong>Your Photo was Not Uploaded</strong>: Only valid image types are allowed. Please upload a file in one of those formats.<hr />" validationexpression="^((([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))*|(.*))(\.jpg|\.JPG|\.jpeg|\.JPEG|\.bmp|\.BMP)$" controltovalidate="UploadFileInput" enabled="true" visible="true" enableclientscript="false" display="dynamic" id="Regularexpressionvalidator1" style="color:#990022;"></asp:regularexpressionvalidator>
Select a Photo to Upload by Pressing the Browse Button Below:
<br />
<input id="UploadFileInput" type=file runat="server" name="UploadFileInput" />
<br />
<input type=button id="UploadFileButton" value="Upload Photo" onserverclick="UploadFile" runat="server" name="UploadFile" />
<hr />
(Your photo will appear below in its actual size)
<br />
<br />
<img id="UploadedPhotoDisplay" border="0" runat="server" />
</form>
</body>
</html>
The sample upload code also includes some helpful error checking and the ability to change the types of files uploaded to any type you might need. We hope you enjoy your new Photo Upload Webpage!
Try an Even Better Photo Upload Website System
Why spend all your time coding pages when you can have a Complete Photo Upload and Management System that is already built. We have created our own photo upload and management system for you. If you think you might want an even better Photo Upload Website, try ImageIsland. 
Read More.... Below is a screen shot of what ImageIsland looks like:
