Click here to Skip to main content
Click here to Skip to main content
Go to top

Lightweight Image Upload with Animation

, 22 Jun 2011
Rate this:
Please Sign up or sign in to vote.
This tutorial is going to guide you in creating a rich application for Upload, View and Delete images with special effects.

User Interface

Animated_Screen.gif

Introduction

This tutorial is going to guide you in creating a rich application for Upload, View and Delete images with special effects. You must have followed many tutorials to help you upload files using .NET or (AJAX or JQuery). Now I combined both of these elements to create one complete application.

Used Library from JQuery

jquery-1.5.1.js (JQuery framework for special effects) ajaxupload.3.5.js (for upload file with silent mode) you can download latest files from http://jquery.com/.

What's Surprising in this Article?

I am showing you a surprising thing... I have not used any File Upload control and this magic was done by using JQuery.

Using the Code

Default.aspx (which contains User Interface) the following function is dynamically creating interface for upload Image without File Upload control.

$().ready(function () {
            var counter = 0;
            $(function () {
                var btnUpload = $('#addImage');
                new AjaxUpload(btnUpload, {
                    action: 'saveupload.aspx',
                    name: 'uploadfile',
                    onSubmit: function (file, ext) {
                        $("#loading").show();
                    },
                    onComplete: function (file, response) {
                        var uploadedfile = "UserData/" + file;
                        $("#uploadImageWrapper").
                        append("<div class='imageContainer offset'  
                        id='current" + counter + "'>
                        <img height='65px' width='65px' src='" + 
                        uploadedfile + "' alt='" + uploadedfile + 
                        "'/><div id='close" + counter + "' 
                        class='close'  title='" + uploadedfile + "'  
                        önclick='RemoveImage(this);'><a ></a></div></div>");
                        $('#current' + counter).fadeIn('slow', function () {
                            $("#loading").hide();
                            $("#message").show();
                            $("#message").html("Added successfully!");
                            $("#message").fadeOut(3000);
                            counter++;
                        });
                    }
                });
            });
        });

In the above method, I have defined action: 'saveupload.aspx'. That means whenever you select any file from File Dialog, it will automatically call saveupload.aspx files Page_load method, and this function gets all the requested files (in my case, it is only one at a time) and saves at a specific location (in my case \UserData\). The following code is very self explanatory (for saving file on server saveupload.aspx.cs).

 protected void Page_Load(object sender, EventArgs e)
    {
        HttpFileCollection uploadedFiles = Request.Files;
        int i = 0;
        if (uploadedFiles.Count > 0)
        {
            while (!(i == uploadedFiles.Count))
            {
                HttpPostedFile userPostedFile = uploadedFiles[i];
                if (userPostedFile.ContentLength > 0)
                {
                    string filename = userPostedFile.FileName.Substring
			(userPostedFile.FileName.LastIndexOf("\\") + 1);
                    userPostedFile.SaveAs(Path.Combine
			(Server.MapPath("UserData"), filename));
                }
                i += 1;
            }
        }
    }

After successfully saving file on server, you should be able to see message on bottom of the Image Uploader "Added successfully!". This message will automatically be closed after 3 seconds with transition effect. The following code is specifically for delete file from server. I have defined url: "removeupload.aspx?filename". That means whenever you clicked on X mark (you can see it over every uploaded image), it will pass filename to the server for deleting the file.

function RemoveImage(_this) {
            var counter = _this.id.replace('close', '');
            $("#loading").show();
            $.ajax({
                type: "POST",
                url: "removeupload.aspx",
                data: "filename=" + _this.getAttribute('title'),
                success: function (msg) {
                    $('#current' + counter).fadeOut('slow', function () {
                        $("#loading").hide();
                        $("#message").show();
                        $("#message").html("Removed successfully!");
                        $("#message").fadeOut(3000);
                    });
                }
            });
        }

The following code is very self explanatory (for deleting file on server removeupload.aspx.cs):

protected void Page_Load(object sender, EventArgs e)
    {
        try
        {
            string filename = Server.MapPath(Request.Params["filename"]);
            FileInfo TheFile = new FileInfo(filename);
            if (TheFile.Exists) File.Delete(filename);
        }
        catch (Exception ex)
        {
        }
    }

Thing For You To Do

  • Try to check for file type validation
  • Exception handling

Your Thoughts

If you find some issues or bugs with it, just leave a comment or drop me an email. If you make any notes on this, let me know that too so I don't have to redo any of your hard work. Please provide a "Vote" if this would be helpful.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sunasara Imdadhusen
Software Developer (Senior) Infostretch Ahmedabad-Gujarat
India India
Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

sunaSaRa Imdadhusen
 
AWARDS:
  1. 1st Best Asp.Net article of SEP 2010
  2. 2nd Best Asp.Net article of MAY 2011
 
Read More Articles...
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalRenju Vinod17-Mar-14 19:56 
GeneralRe: My vote of 5 PinprofessionalSunasara Imdadhusen22-Apr-14 2:29 
GeneralFile size limit PinmemberNagraj Naik2-Jul-12 4:33 
GeneralRe: File size limit PinprofessionalSunasara Imdadhusen22-Apr-14 2:32 
QuestionAbout the control PinmemberAli Al Omairi(Abu AlHassan)15-Sep-11 4:09 
AnswerRe: About the control PinmemberSunasara Imdadhusen14-Dec-11 1:45 
GeneralRe: About the control PinmemberAli Al Omairi(Abu AlHassan)28-Jan-12 2:25 
QuestionExcellent PinmemberSavalia_Manoj2-Sep-11 4:08 
AnswerRe: Excellent PinmemberSunasara Imdadhusen13-Sep-11 3:22 
QuestionUsing extra data and response type PinmemberAli Al Omairi(Abu AlHassan)11-Jul-11 3:54 
AnswerRe: Using extra data and response type PinmemberSunasara Imdadhusen13-Jul-11 4:01 
GeneralRe: Using extra data and response type PinmemberAli Al Omairi(Abu AlHassan)7-Aug-11 0:28 
GeneralRe: Using extra data and response type PinmemberSunasara Imdadhusen7-Aug-11 16:54 
QuestionNew Update PinmemberAli Al Omairi(Abu AlHassan)8-Jul-11 6:36 
AnswerRe: New Update PinmemberSunasara Imdadhusen13-Jul-11 4:00 
GeneralRe: New Update PinmemberAli Al Omairi(Abu AlHassan)6-Feb-12 22:53 
GeneralMy vote of 5 Pinmemberramakrishnankt1-Jul-11 1:15 
GeneralRe: My vote of 5 PinmemberSunasara Imdadhusen1-Jul-11 18:23 
GeneralMy vote of 5 PinmemberOmar Gamil23-Jun-11 6:17 
GeneralRe: My vote of 5 PinmemberSunasara Imdadhusen23-Jun-11 18:36 
GeneralMy vote of 5 Pinmemberkelvin z22-Jun-11 20:13 
AnswerRe: My vote of 5 PinmemberSunasara Imdadhusen22-Jun-11 22:01 
QuestionGood Article Pinmemberrahultandon100022-Jun-11 19:02 
AnswerRe: Good Article [modified] PinmemberSunasara Imdadhusen22-Jun-11 19:17 
QuestionMy vote is 5 PinmemberNajmul Hoda22-Jun-11 4:45 
AnswerRe: My vote is 5 [modified] PinmemberSunasara Imdadhusen22-Jun-11 18:30 
AnswerRe: My vote is 5 PinprofessionalSunasara Imdadhusen22-Apr-14 2:33 
SuggestionGood Idea PinmemberAli Al Omairi(Abu AlHassan)22-Jun-11 3:43 
AnswerRe: Good Idea [modified] PinmemberSunasara Imdadhusen22-Jun-11 18:28 
GeneralRe: Good Idea PinmemberAli Al Omairi(Abu AlHassan)23-Jun-11 10:14 
GeneralRe: Good Idea PinmemberSunasara Imdadhusen23-Jun-11 18:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 22 Jun 2011
Article Copyright 2011 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid