フロントエンドの画像アップロードで問題が発生する

Question

サムネイルがボタンの横に表示される画像アップロードを実装する必要があります。関数「getAsDataURL」を使用して実装しました...クロームとサファリでは機能しません...任意のソリューション??

<script type="text/javascript"> 
    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'; 
    } 
</script> 


<div class="uploading_block_inner"> 
           <div class="uploaded_img_inner"><img id="prevImage" style="display:none;" width="91" height="91" /></div> 
           <div class="submit_button_upload"> 
            <div class="upload"><input type="file" id="" name="myImage" onchange="setImage(this);" /></div> 
           </div> 
           <div class="upload_submit_inner"><input type="submit" name="" value="" /></div>        
          </div> 

Answer 1

jQueryを使用していると仮定して、私は以下の解決策を用意しています。ここで

$(document).ready(function(){ 
    $('input[type=file]').on('change', setImage); 
}); 

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'; 
    } 
}