I have a problem with the file upload control in MVC.
My DOM element looks like
@Html.TextBoxFor(m => m.logo, new { id = "logoUpload", type = "file", @accept = "image/*", @onchange = "showpreview(this);" })
onChange event looks like
function showpreview(input) {
if (input.files && input.files[0]) {
var logo = $('#logoUpload')[0].value;
var fileName = logo.match(/[^\/\\]+$/);
var extension = fileName[0].substr((fileName[0].lastIndexOf('.') + 1));
extension = extension.toLowerCase();
if (extension != "jpe" && extension != "jpg" && extension != "jpeg" && extension != "gif" && extension != "png" && extension != "bmp" && extension != "tif" && extension != "tiff" && extension != "psd") {
successOrErrorMessageResponse("Please select a image file types jpg, gif, png, tif or bmp", "fail");
return false;
}
$('#ajax_loader_center').show();
var reader = new FileReader();
reader.onload = function (e) {
$('#preview_Logo').attr('src', e.target.result);
$('#preview_Logo').show();
$('#ajax_loader_center').hide();
}
reader.readAsDataURL(input.files[0]);
} else {
$('#preview_Logo').attr('src', input.value);
}
}
The problem is that the input.files
in the onChange function returns Undefined and the file is not uploaded in the IE browsers.(IE-9 and IE-8). It is working fine in IE-10 and above, Firefox, Chrome etc..
Please anyone help me how to solve this issue
Thanks in Advance,
Sushmaja Arumalla