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

来源：互联网发布：lol游戏端口是多少编辑：程序博客网时间：2024/05/16 11:41

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" onchange="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', '');
    }
}