Show image after upload
HTML
<input type="file" id="fuImage" />
<br />
<img id="imgPreview" alt="Preview Image" src="" width="300" height="250" />
JavaScript
$(document).ready(function () {
$('#fuImage').on('change', function () {
$("img#imgPreview").attr('src', ''); //First remove the image src if already selected
//To check if uploaded file is image only..
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only image files are allowed!");
return false;
}
//To check if browser version IE <= 9, apply image filter type to support <= IE9..
if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
var img = $('img#imgPreview')[0];
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = $(this).val();
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').sizingMethod = 'scale';
} else {
//To check 'FileReader' is supported by browser or not..
if (typeof (FileReader) != 'undefined') {
var frImage = new FileReader();
frImage.onload = function (e) {
$("img#imgPreview").attr('src', e.target.result);
}
frImage.readAsDataURL($(this)[0].files[0]);
} else {
alert("Your browser does not support FileReader!");
}
}
});
});