이미지 미리보기가 IE 및 Firefox에서 정상적으로 작동하지 않습니다.

Question

아래 코드는 Chrome에서 잘 작동하지만 IE 및 FireFox에서는 정상적으로 작동하지 않습니다. 제가 아래에 뭔가 빠졌는지 알려주세요.

<div style="height:0px;overflow:hidden"> 
    <input type="file" id="profileimgload" name="profileimgload" onchange="PreviewImage();" accept="image/*" capture="camera" />  
</div> 
<img src="../../images/static/default_images/user_default.png" id = "uploadImageBoxImg" width="150" height="150" /> 

<span class="btn btn-xs btn-primary" align="center" onClick="addprofileimage()" title="change profile picture">upload</span> 
</div> 

자바 스크립트 먼저 파일 API를 지원하지 않는 IE (9 이하)의 모든 이전 버전의

//profile image upload 
function addprofileimage() 
{ 
    $("#profileimgload").click(); 
} 

function PreviewImage() { 
    var oFReader = new FileReader(); 
    oFReader.readAsDataURL(document.getElementById("profileimgload").files[0]); 
    alert("inside preview 2"); 
    oFReader.onload = function (oFREvent) { 
     $("#uploadImageBoxImg").attr("src", oFREvent.target.result); 
     //document.getElementById("imageHiddenField").value = oFREvent.target.result; 
    }; 
}; 

Answer 1

...

또한 당신이 더 온로드 대신 oFReader.onloadend 이벤트를 사용합니다.

oFReader.onloadend = function() { 

    $("#uploadImageBoxImg").attr("src", oFReader.result); 

} 

여기에 몇 가지 유용한 문서에 대한 File Reader API

Answer 2

당신이 IE에서 콘솔을 볼 수 있습니까이

function PreviewImage() { 
     var funcs = []; 
     var documentos = document.getElementById("uploadImage"); 
     var tamanio = documentos.files.length; 
     for (var i = 0; i < tamanio; i++) { 
      funcs[i] = (function(index) { 
       return function(event) { 
        document.getElementById("uploadPreview" + index).src = event.target.result; 
       }; 
      })(i); 
     } 
     var oFReader = new FileReader(); 
     for (var k = 0; k < tamanio; k++) { 
      oFReader = new FileReader(); 
      oFReader.readAsDataURL(documentos.files[k]); 
      oFReader.onload = funcs[k]; 

     }