JavaScriptまたはjqueryを使用してアップロード前に画像をプレビューするにはどうすればよいですか？

Question

アップロードする前にユーザーが選択した（参照）画像を表示するだけで済みます。私はこのコードを使用しています。この目的のために：

JS

function setImage(file) { 
    if(document.all) 
     document.getElementById('prevImage').src = file.value; 
    else 
     document.getElementById('prevImage').src = file.files.item(0).getAsDataURL(); 
    if(document.getElementById('prevImage').src.length > 0) 
     document.getElementById('prevImage').style.display = 'block'; 
} 

<img id="prevImage" src="" alt="" width="313" height="315" /> 
<input name="photo1" id="photo1" type="file" onchange="setImage(this);" value="" class="input" size="17"/> 

HTMLは、このコードは、サファリ、Firefoxの3,4,5で正常に動作しないが、 Google Chrome 12以上、IE 8,9で動作します。

この問題に関する解決策を教えてください。

私はすでに他のソリューションを試してみましたが、すべての主要なブラウザで動作していません。

このコードまたは完全に新しいコードの解決策がある場合は、教えてください。

Answer 1

stack postから完全な解決策を見つけると、hereが解決策です。

Answer 2

標準のWeb APIであるFileReaderを使用することもできます。