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及更低版本）不支持File 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];

        }

Chrome浏览器中的图像预览在IE和Firefox中无效

2 个答案: