Upload Image Using jQuery Ajax in Asp.net C#

23
Our Reader Score
[Total: 1 Average: 5]
 jQuery Ajax image upload: This article explains how to upload an image using jQuery in Asp.net C# .i.e upload an image file from client side with jQuery ajax call, this means we can upload image files without the page refresh or no postback in Asp.net C# and for this we use Generic handler ( ashx file ).

I must suggest you to check how to preview an image before uploading it to the server with simple Jquery and HTML5 FileReader API.

Have you ever upload files without using any plugin?

If NO, then this post is about it, Asynchronous file upload using jQuery ( Ajax method ) in asp.net C# without any plugin, yes you read it right without any plugin.

Let have a step by step guide

Step to Upload image using jQuery in Asp.net C#:

  1. Download and include jQuery lib file.  
  2. Add Html Markup file input tag. 
  3. Client-side: Call a jQuery Ajax method.  
  4. Server-side – Add Generic Handler (ashx file) to handle server-side code, i.e., C# code to saving the uploaded file.

Screenshot:Upload image using jQuery ajax in Asp.net C#  

# Download and include jQuery file:

Before writing any code, first we will download and add latest jQuery file. You can host the jQuery file on your server, or you can also use from the Google-hosted site.

So now our head tag looks like as written below.

# HTML Markup:

Here now we add a file input tag (file upload control ), and an image tag.

Browse control to select the image file, and when the image gets uploaded will set the newly uploaded image path / source to our image control, which we have already added on our Asp.net Web Page.

Finally, this is how our HTML looks like as written below.

# jQuery: Calling  jQuery AJAX method

Now we create a common function sendFile() in which we add the file content to FormData’s collection and making a jQuery Ajax call

 Note: The contentType and processData are set to false which is important.

Now we call this function on File Upload control change event. .i.e. whenever user select any image file to upload our sendFile() function gets call. Code as shown below.

You may have notice 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 🙂 

# Server-side: Add Generic Handler ( ashx file) to handle server side code i.e. C# code to save image file on the server.

Now first import System.IO namespaces as shown in below code.

Copy the below-written code, this will get the files from client-side, and rename image with a unique name, then save it to the MediaUploader folder.

Note: Here MediaUploader is our folder name, where all our uploaded images get saved.

  Output: Finally we are done with Uploading image using jQuery ajax Upload image using jQuery ajax in Asp.net C#  

You can also check these articles:

  1. An easy way to upload bulk images in Asp.net C#.
  2. Upload and Resize image using Dropzone Js in Asp.net.
  3. Preview Image before upload it with jQuery in Asp.net.
  4. Generic Handler ashx file: Post send JSON data in Asp.net C#.
  5. jQuery Ajax JSON Example in Asp.net with SQL database.

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time! 


Get your Printable Copy

23 COMMENTS

  1. 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 this
      error: function (response) {
      console.log(response);
      }

  2. Hello,

    I have read all code and used in my application. i am running my project through Chrome. My image is uploaded but image is not displayed.

    In my publish ImageStorage is for uploaded image all images saved in that folder and it works.

    But image is not displayed following error appears when i inspect particular page Chrome
    it gives error like: http://localhost:2317/Zelia/Main_Masters/ImageStorage/Tulips.jpg Failed to load resource: the server responded with a status of 404 (Not Found)

    How to resolve this problme

    Thanks,
    Siddhnat

    • 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

  3. 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)

    • Hi tusto,
      Using session value on server-side you can easily link these uploaded photos with respected User/ Profile ID. i.e you can save and access session value in your generic handler

LEAVE A REPLY