Tested in HTML5 browsers and IE > 7.
JSFiddle issues an error in IE < 10 so I put the code in here.
jQuery is used in this example.
CSS:
.imgLogoIE
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width:500px;
height:400px;
}
JavaScript:
var v = navigator.appVersion,
p = v.indexOf('MSIE'),
IElt10 = (p != -1 && parseFloat(v.substr(p+5)) < 10);
function LoadPreviewImg (pFile) {
var _$imgLogo = $('.js_imgLogo');
if (IElt10) {
if ('IMG' == _$imgLogo.prop('nodeName')) {
_$imgLogo.replaceWith('
');
}
setTimeout(function () {
$('.js_imgLogo').get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = pFile.value
},50);
}
else if (pFile.files && pFile.files[0]) {
var _reader = new FileReader();
_reader.onload = function (e) {
_$imgLogo.attr('src', e.target.result);
}
_reader.onerror = function (e) {
_$imgLogo.hide();
}
_reader.readAsDataURL(pFile.files[0]);
}
}
HTML:
<form id="form1">
preview:
<input onchange="LoadPreviewImg(this)" type="file" />
<img class="js_imgLogo" />
</form>
preview:
<input onchange="LoadPreviewImg(this)" type="file" />
<img class="js_imgLogo" />
</form>
No comments:
Post a Comment