Thursday, September 25, 2014

Cross-browser Image preview

To preview an image in browser before uploading it to server.
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>

No comments:

Post a Comment