Click here to Skip to main content
11,573,386 members (52,800 online)
Click here to Skip to main content

Lightweight Image Upload with Animation

, 22 Jun 2011 CPOL 29.4K 2K 48
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. 2nd Best Mobile Article of January 2015
  2. 3rd Best Web Dev Article of May 2014
  3. 2nd Best Asp.Net article of MAY 2011
  4. 1st Best Asp.Net article of SEP 2010

Read More Articles...

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
Renju Vinod17-Mar-14 19:56
professionalRenju Vinod17-Mar-14 19:56 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen22-Apr-14 2:29
professionalSunasara Imdadhusen22-Apr-14 2:29 
GeneralFile size limit Pin
Nagraj Naik2-Jul-12 4:33
memberNagraj Naik2-Jul-12 4:33 
GeneralRe: File size limit Pin
Sunasara Imdadhusen22-Apr-14 2:32
professionalSunasara Imdadhusen22-Apr-14 2:32 
QuestionAbout the control Pin
Ali Al Omairi(Abu AlHassan)15-Sep-11 4:09
memberAli Al Omairi(Abu AlHassan)15-Sep-11 4:09 
AnswerRe: About the control Pin
Sunasara Imdadhusen14-Dec-11 1:45
memberSunasara Imdadhusen14-Dec-11 1:45 
GeneralRe: About the control Pin
Ali Al Omairi(Abu AlHassan)28-Jan-12 2:25
memberAli Al Omairi(Abu AlHassan)28-Jan-12 2:25 
QuestionExcellent Pin
Savalia_Manoj2-Sep-11 4:08
memberSavalia_Manoj2-Sep-11 4:08 
AnswerRe: Excellent Pin
Sunasara Imdadhusen13-Sep-11 3:22
memberSunasara Imdadhusen13-Sep-11 3:22 
QuestionUsing extra data and response type Pin
Ali Al Omairi(Abu AlHassan)11-Jul-11 3:54
memberAli Al Omairi(Abu AlHassan)11-Jul-11 3:54 
AnswerRe: Using extra data and response type Pin
Sunasara Imdadhusen13-Jul-11 4:01
memberSunasara Imdadhusen13-Jul-11 4:01 
GeneralRe: Using extra data and response type Pin
Ali Al Omairi(Abu AlHassan)7-Aug-11 0:28
memberAli Al Omairi(Abu AlHassan)7-Aug-11 0:28 
GeneralRe: Using extra data and response type Pin
Sunasara Imdadhusen7-Aug-11 16:54
memberSunasara Imdadhusen7-Aug-11 16:54 
QuestionNew Update Pin
Ali Al Omairi(Abu AlHassan)8-Jul-11 6:36
memberAli Al Omairi(Abu AlHassan)8-Jul-11 6:36 
AnswerRe: New Update Pin
Sunasara Imdadhusen13-Jul-11 4:00
memberSunasara Imdadhusen13-Jul-11 4:00 
GeneralRe: New Update Pin
Ali Al Omairi(Abu AlHassan)6-Feb-12 22:53
memberAli Al Omairi(Abu AlHassan)6-Feb-12 22:53 
GeneralMy vote of 5 Pin
ramakrishnankt1-Jul-11 1:15
memberramakrishnankt1-Jul-11 1:15 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen1-Jul-11 18:23
memberSunasara Imdadhusen1-Jul-11 18:23 
GeneralMy vote of 5 Pin
Omar Gamil23-Jun-11 6:17
memberOmar Gamil23-Jun-11 6:17 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen23-Jun-11 18:36
memberSunasara Imdadhusen23-Jun-11 18:36 
GeneralMy vote of 5 Pin
kelvin z22-Jun-11 20:13
memberkelvin z22-Jun-11 20:13 
AnswerRe: My vote of 5 Pin
Sunasara Imdadhusen22-Jun-11 22:01
memberSunasara Imdadhusen22-Jun-11 22:01 
QuestionGood Article Pin
rahultandon100022-Jun-11 19:02
memberrahultandon100022-Jun-11 19:02 
AnswerRe: Good Article [modified] Pin
Sunasara Imdadhusen22-Jun-11 19:17
memberSunasara Imdadhusen22-Jun-11 19:17 
QuestionMy vote is 5 Pin
Najmul Hoda22-Jun-11 4:45
memberNajmul Hoda22-Jun-11 4:45 

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 | Terms of Use | Mobile
Web04 | 2.8.150624.2 | Last Updated 22 Jun 2011
Article Copyright 2011 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid