圖片預覽在IE和Firefox中無法正常工作Chrome

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> 

的JavaScript

//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

所有舊版本的IE（9，下）不支持文件API首先...

而且您更好地使用oFReader.onloadend事件代替的onload的。

oFReader.onloadend = function() { 

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

} 

下面是一些有用的文檔約File Reader API

Answer 2

試試這個

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]; 

     }