[更新]在Chrome中使用FileReader [英] [Update]Using FileReader in Chrome

问题描述

我建立了一个Apache服务器，将页面放在服务器上，问题解决了. 因此，我知道此问题是由chrome中的安全设置引起的.

现在我想知道，是否可以让本地网页访问本地文件?

我将创建一个页面，该页面允许将本地图像拖到该页面上. 这是我的代码，在chrome中不起作用

问题是reader.onload事件没有触发，而onerror却触发了.

那是什么原因?以及如何解决? 非常感谢.

var oImg=document.getElementById("img1");

oImg.addEventListener('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
}, false);

oImg.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    e.stopPropagation();
    e.preventDefault();

    var thisfile  = e.dataTransfer.files[0],
    reader = new FileReader();

    reader.onload = (function(thisfile){
        return function(e){
            oImg.src = e.target.result;
            }
        }
    })(thisfile);

    reader.readAsDataURL(thisfile);
}

解决方案

我不确定该选项是否仍然可用(可以使用AFAIK)-尝试使用--allow-file-access-from-files开关打开chrome

存在一个可能与您有关的公开问题问题.对该问题加注标的人越多，解决该问题的可能性就越大-参见评论1.

I set up a Apache server, put the page on the server and-problem solved. So I know this problem is caused by security settings in chrome.

Now I wonder, is it possible to let a local webpage access local files?

I'm going to make a page that allows dragging an local image onto it. Here's my code, which doesn't work in chrome

The problem is reader.onload event didn't trigger, onerror did instead.

So what's the reason? And how to fix it? Many thanks.

var oImg=document.getElementById("img1");

oImg.addEventListener('dragover', function(e) {
    e.stopPropagation();
    e.preventDefault();
}, false);

oImg.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
    e.stopPropagation();
    e.preventDefault();

    var thisfile  = e.dataTransfer.files[0],
    reader = new FileReader();

    reader.onload = (function(thisfile){
        return function(e){
            oImg.src = e.target.result;
            }
        }
    })(thisfile);

    reader.readAsDataURL(thisfile);
}

解决方案

I'm uncertain if this option is still available (AFAIK it is) - try opening chrome with the switch --allow-file-access-from-files

An open issue exists that may be relevant to your question. The more people star this issue the more likely it is to get fixed - see comment #1.

这篇关于[更新]在Chrome中使用FileReader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！