Upload Image file Using jQuery Ajax in Asp.net C# [PROGRESS BAR]

jQuery Ajax image file upload: This article explains how to upload an image file using jQuery in Asp.netC# .i.e upload an image file from client side with jQueryajax call. This means we can upload image files without the page refresh or no postback in Asp.net C#. For this, we use Generic handler ( ashx file ) and also display a progress bar while file uploading. .i.e displaying percentage while image getting uploaded.

You may have noticed in above jQuery ajax method we set URL as fileUploader.ashx this is Generic Handler (ashx file). By using this file, we will upload files on the server side. We are done with our client-side code, let’s head to server-side code 🙂

Output: Finally we are done with Uploading image using jQuery Ajax

#BONUS: How to Show progress bar / Loading percentage value while uploading file with jQuery Ajax in Asp.net C#

It’s a good user experience to display uploading percentage or to display the progress bar while uploading files using jquery ajax. For this, we have to add a div tag where we set percentage value of uploading files and with Custom XMLHttpRequest we get for percentage values. Here’s how the code looks like for jquery ajax progress bar.

Sir please solve my problem i m saving data in database with jquery ajax in asp.net there are my fields name gender salary and employee image image save with data field only save path in database and image save in predefine folder how is possible please help me with example thankyou

Hello Singh,
I have error “Undefined” on progress bar…everything works well except progress bar..It throws the error when calling statustxt.html(‘0%’);
It does not even call progressHandlingFunction(e)…

if you notice this line; myXhr.upload.addEventListener(‘progress’,progressHandlingFunction, false);

I trying for the last 8 hours to get this working. I keep on getting these 404.5, 404.3 and now 405 errors. It seems some web.config changes are also needed for the mime, http verb settings. Could you please post the complete thing.

Excelent! It works for me!!! Thank you dude!!!
The generic handler was essential in my case… I tried to call a web method of my ASPX page but it was not possible because the HttpContext context parameter and because the option with false on the ajax call.

Hi tiru,
You are getting “Whoops something went wrong!” alert message, because you have set this as default error message on jquery ajax error method. If you want to check the exact error with code you have make change in your error method as something like thiserror: function (response) {
console.log(response);
}

Hi Himanshu Jain,
Thanks for reading it, and yes you can upload any format file using jquery ajax in asp.net. All you need to do little tweak the above-given code i.e by removing the validation of image format check

If i upload the Image using this Code But After refresh the Page Image Does Not Display Please Provide Me Code After Uploading the Image if i Refresh the Page It could not be removed. How I can bind the Image if i have One Time Upload the image

Hello Vishal thanks for reading.
Above code is about how to upload image files using jquery ajax. If you want to display image on page refresh / page load you can do it by adding an asp.net image control on your .aspx page, and from code-behind set image src

Hi preeti singh,
To save an image in your project file, you need to make an ajax call, which have shown in this article. Pls follow step by step process. All you need to edit your ProjectFolder name inside your Generic Handler file (fileUploader.ashx)

@sandesh Chavan: Yeah it won’t work in IE 8, bcoz FormData() is only supported from IE10, that;s the reason why many developer hate IE.
There are many jQuery plugins availabe, by using it you can upload image in IE also