[更新]在Chrome中使用FileReader

发布于 2024-11-23 23:12:24 字数 807 浏览 2 评论 0原文

我设置了一个 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);
}

原文

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);
}

分享到QQ

分享到微博