Upload Image in folder using Fileupload Control and Handler in Asp.net using Jquery

Steps for Upload Image in folder using Fileupload Control in Asp.net using Jquery

1. Add script to Design Page Head

<script type=”text/javascript”>
function readURL(input) {
var id = input.id;
var path = input.value;
var file = path.split(“\\”);
var filename = file[file.length – 1];
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(“#” + id).after(“<span><img src=’loading.gif’/></span>”);

$.post(‘Handler Path to send data’, { FileData: e.target.result, fileName: filename },
function (result) {
$(“#” + id).next().remove();
alert(result);
});
}
reader.readAsDataURL(input.files[0]);
}
}
</script>

//Use Loader image to show loading while uploading

//Loader Image : loading.gif

2. Add Control to Form

<input type=”file” id=”myfile1″ runat=”server” onchange=”readURL(this);” />

3. Add Generic Handler class file to your project

Click on Image to display big