Hi everybody,

My colleague created the following function to DisplayImage when we select an image in FileUpload:

/** Preview Image **/
var maxSize=10240;
//var defaultPic="../images/id_card.gif";
var outImage="picresult";
var uploadImage=outImage+"myPic";
var fileTypes=["bmp","gif","png","jpg","jpeg"];
var _myPic;
var globalPic;
var _img;
function writeImage(pic) {
	  
var source=pic.value;
var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();
for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;
if (i<fileTypes.length) {
    var _ua=new Array();
    _ua=navigator.userAgent.split(" ");
    var _uaBrowser = _ua[(_ua.length-1)].split("/")[0];
	if(_uaBrowser.match("Firefox")){
	    _ver=_ua[(_ua.length-1)].split("/")[1].split(".")[0];
	    if(_ver<3) {
	        clearImage();
	        alert("You are using Firefox version "+_ver+".\nThis Feature is only available for Version 3 and higher")
	    } else {
  		    _myPic=pic.files.item(0);
            var data = _myPic.getAsDataURL();
		    _img = (_myPic.fileSize>maxSize)?tooBig(_myPic.fileSize):previewImage('data:' + data);	    
	    }
	} else {
		globalPic=new Image();
		globalPic.src=source;
		setTimeout("isSize()",500);
		_img = (globalPic.fileSize>maxSize)?tooBig(globalPic.fileSize):previewImage(globalPic.src);
	}	
  } else {
    clearFU();
    //document.getElementById(uploadImage).firstChild.value = "";
  	alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", "));
  }	  

}
function isSize(){return;}
function clearFU() {
    var emptyFU = new Array();
    emptyFU=document.getElementById(uploadImage).innerHTML.split('value="');
    if(emptyFU.length>1){
        var emptyFUend = emptyFU[1].split('"')[1];
        document.getElementById(uploadImage).innerHTML=emptyFU[0]+" value=\"\" "+emptyFUend;
    } else {
        document.getElementById(uploadImage).firstChild.value = "";
    }
    return;
}
function tooBig (size) {
    clearFU();
	//document.getElementById(uploadImage).firstChild.value = "";
	alert("File is too large!\nPlease use no more than "+(maxSize/1024)+" kB.\n(File size: "+size+" bytes)");			
}
function previewImage (src){
//alert(document.getElementById(outImage).parentNode.firstChild.id)
	//document.getElementById(outImage).src = document.getElementById(outImage+'h').value = src; 
	document.getElementById(outImage).src = src; 
	document.getElementById(outImage).parentNode.style.display="block";
	//alert(document.getElementById(outImage).parentNode.firstChild.value);
	//document.getElementById(outImage).readOnly=true;
}
function clearImage(){
	//document.getElementById(outImage).src = document.getElementById(outImage+'h').value = "";
	clearFU();
	document.getElementById(outImage).src = "";  
	document.getElementById(outImage).parentNode.style.display="none";
	//document.getElementById(outImage).readOnly=true;
}

It works good in FireFox, but in IE we're having problems. For him JPG format doesn't work, for me none of the formats show preview in IE7.

Do you have an idea how to preview a selected image using FileUpload?

Thanks a lot in advance.