アップロード前に画像をプレビュー

Question

画像をサーバーにアップロードする前にプレビューします。私は以下のスクリプトを使用しています。スタンドアロンのHTMlでも同じスクリプトが正常に動作しますが、jspで同じスクリプトを実行すると、サイズ変更されたアプリケーションイメージは表示されません。どんなヘルプも評価されます。

<script type="text/javascript"> 

// 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 < 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 > maxWidth) { 
     y *= maxWidth/x; 
     x = maxWidth; 
    } 
    if (y > maxHeight) { 
     x *= maxHeight/y; 
     y = maxHeight; 
    } 
    field.style.display = (x < 1 || y < 1) ? "none" : ""; 
    field.src = globalPic.src; 
field.width = x; 
    field.height = y; 
} 
</script> 

Answer 1

あなただけのファイルAPIでこれを行うことができます応答を

var reader = new FileReader(); 
reader.onload = (function(globalPic) { return function(e) { globalPic.src = e.target.result; }; })(globalPic); 
reader.readAsDataURL(what.files[0]);