Question

我正在使用this tutorial上传图片并显示它。它在Chrome和Firefox中运行良好，但它没有在Safari中显示上传的图像。为什么呢？

HTML

<div id="page-wrapper">

<h1>Image File Reader</h1>
<div>
    Select an image file: 
    <input type="file" id="fileInput">
</div>
<div id="fileDisplayArea"></div>

的Javascript

window.onload = function() {

    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');


    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var imageType = /image.*/;

        if (file.type.match(imageType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerHTML = "";

                var img = new Image();
                img.src = reader.result;

                fileDisplayArea.appendChild(img);
            }

            reader.readAsDataURL(file); 
        } else {
            fileDisplayArea.innerHTML = "File not supported!"
        }
    });

}

Answer 1

打开Web开发工具（Firefox中的Firebug或Chrome中的CTRL + SHIFT + J），使用元素检查器选择图像元素，并查看其加载的URL并确定它与URL的不同之处应加载。

由于您在Windows上使用Safari 5.1，因此不支持FileReader API，Windows上的Safari将不再更新您最好的选择是使用来自服务器的占位符图像并将此战斗称为画。 Windows 5.1上的Safari 5.1市场份额充其量是微不足道的，只会随着时间的推移而减少。编程的一部分是知道何时离开战斗。

if (window.FileReader)
{
 //Your FileReader code here.
}
else
{
 //Insert an image from the server here.
}

在Windows上的Safari 5.1中不显示上载的图像

1 个答案: