Question

我正在尝试让这段代码在Chrome中运行（最新版本10.0.648.205），并且它在Firefox中正常运行。这里，showImage函数的e.target.result是空的。谁能告诉我我做错了什么？

$(function () {

    var dropbox = document.getElementById("dropimage");

    dropbox.addEventListener("dragenter", function (e) {
        this.className = "over";
        e.preventDefault();
        e.stopPropagation();
    }, false);

    dropbox.addEventListener("dragover", function (e) {
       e.preventDefault();
       e.stopPropagation();
    }, false);

    dropbox.addEventListener("dragleave", function (e) {
        var target = e.target;

        if (e && e === dropbox) {
            this.className = "";
        }
        e.preventDefault();
        e.stopPropagation();
    }, false);

    dropbox.addEventListener("drop", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var files = e.dataTransfer.files;
        var count = files.length;

        if (count > 0) {
            handleFiles(files)
        }
    }, false);

    function handleFiles(files) {
        $("#droplabel").html("Processing...");

        file = files[0];

        var reader = new FileReader();
        reader.onloadend = showImage;        
        reader.readAsDataURL(file);
    }

    function showImage(e) {
        $("#playerImage").attr("src", e.target.result);
        $("#droplabel").html("Done");
    }
 });

HTML很简单（为简单起见，我选择了包含脚本的行）：

<html>
    <body>
        <img id="playerImage"/>
        <div id="dropimage">
            <span id="droplabel">Drop file here...</span>
        </div>

    </body>
</html>

另外，如果我尝试为jQuery的$ .bind更改dropbox.addEventListener，它根本不会做任何事情。有什么想法吗？

Answer 1

问题在于我将html作为文件打开。 Chrome不喜欢这样，所以我通过将我的html文件放在 wwwroot 文件夹中并使用 localhost / dnd.html 地址打开它来解决问题。

Chrome中的HTML5和File API问题

1 个答案: