Question

我正在开发一个在客户端脱机工作（使用cashe）的网站我需要通过网站实现图像上传到LocalStorage，然后在用户访问互联网时发送。要将图像读取为URL，我使用FileReader BUT 问题是大多数用户将使用Safari浏览器，Safari中没有FileReader功能（＆lt; 6）。

我读到它可以通过ajax发布到php脚本。 php脚本应回显内容......但我需要我的网站脱机工作，所以我认为通过ajax实现它是不可能的......我是对的吗？

如何在Safari浏览器中实现图像阅读？

Answer 1

<强>更新

您还需要在页面中包含swfobject脚本，以使Flash回退正常工作，它是FileReader polyfill的依赖项。您可以here下载该软件包。

<强>上：

这是一个使用FileReader插件演示的示例。您需要使用jQuery 1.x（jquery-1.11.3.min.js）来实现所需的向后兼容性：

<input type="file" id="files" name="files[]" multiple>
<div id="list"></div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.FileReader.min.js"></script>

<script>

$("#files").fileReader({
    filereader: "js/filereader.swf"
});

$("#files").on("change", function(evt) {

    for (var i = 0; i < evt.target.files.length; i++) {

        console.log(evt.target.files[i].name, evt.target.files[i].type, evt.target.files[i].size, evt.target.files[i].lastModifiedDate);

        var f = evt.target.files[i];
        var reader = new FileReader();

        reader.onload = (function(theFile) {

            return function(e) {

                // Render preview
                var span = document.createElement('span');
                span.innerHTML = '<img class="thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/>';
                document.getElementById('list').insertBefore(span, null);

            };

        })(f);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f);        

    }

});

</script>

的上一页

您需要使用此填充程序（例如此FileReader插件）。它检测用户的浏览器是否具有FileAPI，如果没有，则使用Flash模拟现在标准的FileReader。查看文档，但我相当确定这是您所需要的。

我知道你没有用jQuery标记这个问题，但为了使用这个polyfill，它将是必需的，除非你适应它，使其适应vanilla JavaScript。

用于safari的javascript fileReader替代品（＆lt; 6）

1 个答案: