• Download Animated_Image_Upload.zip - 77.02 KB  

User Interface

Introduction

This tutorial is going to guide you in creating reach 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 surprise in this article?

I am showing you, surprised thing... I have not used any File Upload control And this magic was done by using JQuery.

Using the code

Defaul.aspx (which contain User Interface) the follwing 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 then it will automatically call saveupload.aspx files Page_load method, and this function is getting all the requested files (in my case is only one at a time) and save at specific location (in my case \UserData\). follwing 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 save file on server then you should able to see message on bottom of the Image Uploader "Added successfully!". this message will automatically closed after 3 seconds with transition effect. following code is specifically for Delete file from server. I have defined url: "removeupload.aspx?filename". that means whernever you clicked on X mark (you can see it over the every uploaded images), it will pass filename to ther server for deleting 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);
                    });
                }
            });
        }

follwing 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)
        {
        }
    }

You should 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.