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

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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