Var _URL = window.URL || window.webkitURL whenever user select any image file to upload our sendFile() function gets call. Code as shown below. Now we call this function on a File Upload control change event.i.e. * Note: The contentType and processData are set to false which is important. $('#myUploadedImg').attr('src', my_path)

Now we create a common function sendFile() in which we add the file content to FormData's collection and making a jQuery Ajax call //*įormData.append('file', $('#f_UploadImage').files) Here now we add a file input tag (file upload control ), and an image tag.īrowse 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.įinally, this is how our HTML looks like as written below. So now our head tag looks like as written below. You can host the jQuery file on your server, or you can also use the Google-hosted site. Show (display) Progress Bar while image uploading.īefore writing any code first, we will download and add the latest jQuery file.Server-side - Add Generic Handler (ashx file) to handle server-side code, i.e., C# code to saving the uploaded file.Client-side: Call a jQuery Ajax method.Download and include the jQuery lib file.Let have a step by step guide Step to Upload image using jQuery in Asp.net C#: 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 and also display the progress bar.

Have you ever upload files without using any plugin? I must suggest you to check how to preview an image before upload it to the server using jQuery and HTML5 FileReader API. This means we can upload image files without the page refresh or no postback in Asp.net C#.įor this, we use a generic handler ( ashx file ) and also display a progress bar while file uploading.i.e displaying percentage while image gets uploaded. i.e upload an image file from client-side with jQueryajax call. JQuery Ajax image file upload: This article explains how to upload an image file using jQuery in Asp.netC#.

Asp file upload example