How to Clear ASP.Net FileUpload Control using jQuery

No.of Views4008
Bookmarked0 times
Downloads 
Votes0
By  ayyanarj   On  02 Nov 2010 11:11:39
Tag : JQuery , Miscellaneous
Here i am going to discuss about on how to clear the file upload control using jQuery. To clear file upload control, you have to place file upload control within the DIV tag like below.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

Here i am going to discuss about on how to clear the file upload control using jQuery. To clear file upload control, you have to place file upload control within the DIV tag like below.

Html Code

<div id="div_fileupload">
<asp:FileUpload ID="fileUpload" runat="server" onkeypress="return false;" />
</div>

jQuery Custom Function

// Clearing text of file upload control by means of replacing with HTML content.
// you can place this code in your JS file.
$.ClearFileUpload = function (fileUploadControlId) {
try {
document.getElementById(fileUploadControlId).innerHTML = document.getElementById(fileUploadControlId).innerHTML;
$(fileUploadControlId).focus();
} catch (e) {
//alert(e.Description);
}
}

Calling jQuery Custom Function from ASP.Net Design View

function Checkfiles() {
var value = $('#fileUpload').val().toLowerCase();
if (value.length != 0) {
if (/.*\.(gif)|(jpeg)|(jpg)|(png)$/.test(value))
return true;

$.ClearFileUpload('div_fileupload');
alert('Please Upload Gif or Jpg Images, or Png Files Only.');
return false;
}
else {
return true;
}
}

You can call the above function in your ASP.Net Submit button OnClientClick event with checking the file extensions.I hope its help to you all.

 
Sign Up to vote for this article
 
About Author
 
ayyanarj
Occupation-Software Engineer
Company-Effindi Technologies Private Limited
Member Type-Junior
Location-India
Joined date-04 Aug 2009
Home Page-http://ayyanar.blogspot.com
Blog Page-http://ayyanar.blogspot.com
 
 
Other popularSectionarticles
    Here I am looking to explain how to call page methods using jQuery.
    Published Date : 16/Apr/2010
    In this snippet, I will show how to make all elements in array to UpperCase using JQuery. Recently I have published an article for display subcategories using JQuery AJAX with dropdown list, if you are aware of this, you can read here.
    Published Date : 03/Jan/2011
    In this snippet, I will explain how to disable button after clicked once using JQuery. In the web application we have use the many buttons to do some specific operations.But sometimes users click many times in same button, this is giving unexpected results. So this snippet gives solutions to disable once click button and prevent unexpected result.
    Published Date : 19/Jan/2011
    In this snippet I will show you how to create numeric textbox using JQuery.This snippet is allow to enter numbers,backspace keys only.
    Published Date : 21/Jan/2011
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top
</