Preview an Image before Upload
<p>I want to preview an image before uploading it to the server. I am using the script below. The same script works fine in standalone HTMl, but when I run the same script in my jsp my application images which have been resized are not displayed. Any Help would be aprreciated.</p>

<pre><code>&lt;script type="text/javascript"&gt;

// width to resize large images to
var maxWidth = 200;
// height to resize large images to
var maxHeight = 200;
// valid file types
var fileTypes = [ "bmp", "gif", "png", "jpg", "jpeg" ];
// the id of the preview image tag
var previewImage = "previewField";
// what to display when the image is not valid
var defaultPic = "spacer.gif";

var globalPic;
var extOk=false;


function preview(what) {

    var source = what.value;
    var imageName = source;
    var ext = source.substring(source.lastIndexOf(".") + 1, source.length).toLowerCase();
    for ( var i = 0; i &lt; fileTypes.length; i++) {
        if (fileTypes[i] == ext) {
            extOk = true;
        }
    }
    if (extOk == true) {
        globalPic = new Image();
        imageName = imageName.replace(new RegExp(/\\/g),"/");
        globalPic.src ="file:///" + imageName;
        alert(globalPic.src);
        extOk = false;
        applyChanges();
    } else {
        alert(imageName);
        globalPic.src = defaultPic;
        alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extention of one of the following:\n\n"
                + fileTypes.join(", ") + "\n and not " + ext);
    }
}

function applyChanges() {


    var field = document.getElementById(previewImage);
    var x = parseInt(globalPic.width);
    var y = parseInt(globalPic.height);
    if (x &gt; maxWidth) {
        y *= maxWidth / x;
        x = maxWidth;
    }
    if (y &gt; maxHeight) {
        x *= maxHeight / y;
        y = maxHeight;
    }
    field.style.display = (x &lt; 1 || y &lt; 1) ? "none" : "";
    field.src = globalPic.src;
field.width = x;
    field.height = y;
}
&lt;/script&gt;
</code></pre>
