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>