how to add a validation in fileuploader during onchange

Manoj Maharana

10y2.6k.NET

how to add a validation in fileuploader during fileuploader onchange method it will accept only images with image preview???

I have a fileuploader in asp.net c#..I have already made a javascript function during fileuploader onchange method for image preview...

Here is my code for fileuplader

Here is my javascript code for imagepreview

Every thing is working fine..My problem is that i want to add a validation that

uploaded file only accept images not other file..how to modified my javasscript code that it will only accept images..if we will choose other file then fileuploader will become empty...can any one help me please??

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Midhun Tp10y ago
Accepted answer
Hi,
Use regular expression for validating -
function showimagepreview(input) {
var regex = /^([a-zA-Z0-9\s_\\.\-:()])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(input).val().toLowerCase())) {
//Your code
debugger
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function (e) {
$('#imgprvw').attr('src', e.target.result);
}
filerdr.readAsDataURL(input.files[0]);
}
}
else {
alert("Please upload a valid image file.");
$(input).val('');
}
}
Please check below link -
http://www.c-sharpcorner.com/code/3381/preview-image-before-saving-using-jquery.aspx
Manoj Maharana10y ago
Midhun T Phow are you??
please give your suggestion in my latest question..m waiting for your response..
Midhun Tp10y ago
Hi,
You can just hide preview image in your function -
function showimagepreview(input) {
$('#imgprvw').hide();
//Rest of code
After $('#imgprvw').attr('src', e.target.result); line add
$('#imgprvw').show();
}
Manoj Maharana10y ago
thanks a lot it is working fine now
Manoj Maharana10y ago
now code is working fine..only one problem is occuring that when i selecting a image the image preview is showing but after choosing another file the previous image is still showing.... i want to hide the image which is previously choosen..only image will show when only image will choosen..what should i do??
Midhun Tp10y ago
Hi,
Update this line -
filerdr.readAsDataURL($(input)[0].files[0]);
Midhun Tp10y ago
Hi,
It was a mistake. i have updated the code. Please check it.
Manoj Maharana10y ago
$('#imgprvw').attr('src', e.target.result);

if i am using the above code then,my image preview is not working..

how to add a validation in fileuploader during onchange

Midhun T Phow are you??