Chrome 中的 HTML5 和 File API 问题答案

【问题标题】：HTML5 and File API in Chrome problemChrome 中的 HTML5 和 File API 问题
【发布时间】：2011-04-29 21:59:22
【问题描述】：

我正在尝试让这段代码在 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，它根本不会做任何事情。有什么想法吗？

【问题讨论】：

标签： javascript jquery html google-chrome

【解决方案1】：

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

【讨论】：