首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >javascript替代fileReader (<6)

javascript替代fileReader (<6)
EN

Stack Overflow用户
提问于 2014-05-16 15:40:21
回答 1查看 2.7K关注 0票数 1

我正在开发一个在客户端离线工作的网站(使用cashe)。

我需要实现图像上传到LocalStorage通过网站,然后发送它,当用户将访问互联网。要将图像读取为URL,我使用FileReader ,但是使用,问题是大多数用户将使用Safari浏览器,并且在Safari中没有FileReader函数(<6)。

我读到它可以通过ajax发布到php脚本来完成。php脚本应该回显内容..。但我需要我的网站离线工作,所以我认为不可能通过ajax实现它。我说的对吗?

如何在Safari浏览器中实现图像读取?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-22 02:33:51

更新:

您还需要在页面中包含swfobject脚本,以使fallback正常工作,这是FileReader多边形的一个依赖项。你可以去这里下载这个软件包。

前任:

下面是一个示例,演示了如何使用FileReader插件。您需要使用jQuery 1.x (jquery-1.11.3.min.js)来实现所需的向后兼容性:

代码语言:javascript
运行
复制
<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,如果没有,就使用FileReader来模拟现在的标准FileReader。查看文档,但我相当肯定这是您所需要的。

我知道您没有使用jQuery标记的问题,但是为了使用这种填充,它将是必需的,除非您能够很好地适应香草JavaScript。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23699376

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档