ASP.NET Photo Album Part 2 – Adding Images
Adding the Add.aspx PageAt this point, we should have our datbase setup and be ready to add in a form that will allow users to upload images. To begin:
- Right click the project in your solution explorer.
- Select add new item…
- Select a web form.
- Name it ‘Add.aspx’.
- Click add.
We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud hosting!
Next, we need to add in a form that will allow the user to upload an image and give us the information they need such as the date and message. Build a form that looks like this:
First, I added a link to the top of this page that says ‘Home’ and links to the Default.aspx home page that we will add later. Then, I have created a simple table and have added in a fileupload control named ‘fupImage’ with a customvalidator next to it that we will add some functionality to later. Then, I added in a textbox named ‘txtMessage’. Next, I added in a calendar control with a textbox named ‘txtDate’ that we will add some functionality to allow the user to select a date from the calendar, and have that date be set to the date textbox. Finally, I added in a button named ‘btnUpload’. To view the source of this form, download the project here.
Next, we just need to add in some code to allow our form to function properly. First, to make the calendar populate our date textbox, add in the following code in the event that the calendar’s selection is changed:
Code Block
Add.aspx.cs
The code to update our date textbox when the calendar date is changed.
//display newly selected date in our textbox
txtDate.Text = calDate.SelectedDate.ToShortDateString();
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
Then, we need to add some functionality to the custom validator that we added. In this example, we will allow the user to only upload the following file types: ‘jpg’, ‘jpeg’, ‘png’, ‘gif’, and ‘bmp’. To add our validation, add the following code in the ServerValidate event of our custom validator:
Code Block
Add.aspx.cs
The code to validate the selected file.
//create an array of valid file extensions string[] validExt = { "jpg", "jpeg", "png", "gif", "bmp"}; //set args to invalid args.IsValid = false; //get file name string fileName = fupImage.PostedFile.FileName; //check to make sure the string is not empty if (!string.IsNullOrEmpty(fileName)) { //get file extension string fileExt = fileName.Substring(fileName.LastIndexOf('.') + 1).ToLower(); //check if current extensions matches any valid extensions for (int i = 0; i < validExt.Length; i++) { if (fileExt == validExt[i]) //if we find a match args.IsValid = true; //validate it } }
Next, add in the following code in the event the upload button is clicked, to store our image data in our database:
Code Block
Add.aspx.cs
The code to store our data in the database appropriately.
//check to make sure a file is selected before adding it to the db if (fupImage.PostedFile != null && !string.IsNullOrEmpty(fupImage.PostedFile.FileName) && CustomValidator1.IsValid) { //create a byte array to store the binary image data byte[] imgBin = new byte[fupImage.PostedFile.ContentLength]; //store the currently selected file in memeory HttpPostedFile img = fupImage.PostedFile; //set the binary data img.InputStream.Read(imgBin, 0, (int)fupImage.PostedFile.ContentLength); //connect to the db SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString); //sql command to save our image data to the db SqlCommand cmd = new SqlCommand("INSERT INTO Images(ImgBin, ImgSize, ImgType, ImgDate, ImgMessage) VALUES (@ImgBin, @ImgSize, @ImgType, @ImgDate, @ImgMessage)", conn); cmd.CommandType = CommandType.Text; //add img binary data cmd.Parameters.Add("@ImgBin", SqlDbType.Image, imgBin.Length).Value = imgBin; //add img size cmd.Parameters.AddWithValue("@ImgSize", imgBin.Length); //add img type cmd.Parameters.AddWithValue("@ImgType", fupImage.PostedFile.ContentType); //add img date cmd.Parameters.AddWithValue("@ImgDate", DateTime.Parse(txtDate.Text)); //add img message cmd.Parameters.AddWithValue("@ImgMessage", txtMessage.Text); using (conn) { //open the connection conn.Open(); //send the sql query to store our data cmd.ExecuteNonQuery(); } }
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.
TestingTo test this out, simply load up the web site, fill out the form, select a file, and click upload. Then, ensure that the image data was properly added to the database.
Photo Album ASP4 cs
Photo Album ASP4 cs
No comments:
Post a Comment