JSFiddle - React, Tailwind, and code Playground

by Bernat Comerma

HTML

<form id="form1" runat="server">
    <div>
        preview
        <input type="file" onchange="LoadPreviewImg(this)" />
        <img class="js_imgLogo" />
    </div>
</form>

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('<div class="imgLogoIE js_imgLogo"></div>');
        }
        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]);
        }
}