How to preview local image using JS in IE6, IE7, FF3.*

本文链接：https://blog.youkuaiyun.com/scutqinwei/article/details/5090179

For some security reson new version browser cannot use js to preview local img when use file upload control, it is not convinence for user.

if you want preview local image using JS in IE6, IE7, FF3.*, you can fllow this

1. html:

<input class="validate" type="file" id="imageFile" style="height: auto;" invalid_msg="Please select seven IMAGE files to upload. Allow upload file types:

jpg, jpeg, gif, bmp, png." validate="imageFile" οnchange="previewLocalImg(this, 'imgPreview', 'divIE7LocalImgPreview')" />
    <img width="0" height="0" style="display:none; width:80px;height:80px;" id="imgPreview" />
    <div id="divIE7LocalImgPreview" class="IE7LocalImgPreview"></div>

2. css:
.IE7LocalImgPreview
{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    display:none;
    width:80px;
    height:80px;
}

3. js:
function previewLocalImg (file, imgId, divIE7Id) {
    // Firefox3.*, IE8 local img preview
    var img = $('#' + imgId);
    if (file.files) {
        img.attr('src', file.files[0].getAsDataURL());
        img.css('display', '');
    }
    else if (file.value.indexOf('//') > -1 || file.value.indexOf('//') > -1) {
        img.attr('src', file.value);
        img.css('display', '');
    }
    else {
        // IE local img preview for IE6, IE7.
        var newPreview = document.getElementById(divIE7Id);
        newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = file.value;
        $('#' + divIE7Id).css('display', '');
    }
}