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

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

}

}