How to preview local image using JS in IE6, IE7, FF3.*_javascript localimage-优快云博客

本文介绍了一种使用JavaScript在不同浏览器中预览本地上传图片的方法，包括IE6、IE7及火狐3等浏览器的支持方案。通过特定的HTML、CSS及JavaScript代码实现了跨浏览器兼容的图片预览功能。

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