HTML5：readAsDataURL

Question

如果用户已将Image拖入浏览器，我已将eventListerner添加到我的代码中进行注册。然后我想获得Image的src。我在xampp本地工作。这是行不通的。控制台说“匿名功能”和未捕获错误。

    document.body.addEventListener('drop', function (e) {
    e.stopPropagation();
    e.preventDefault();
    file = e.dataTransfer.files[0];

    reader.readAsDataURL( file );
    console.log("dropped");
    console.log("file: "+reader.readAsDataURL( file ).result);
});

Answer 1

以下示例可以帮助您解决问题，显示拖放方法以及文件选择器方法。我没有更具体的代码，因为你只提供了一个代码片段，没有提供控制台中显示的完整错误，也没有一个演示你问题的jsfiddle。

CSS

#progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
    opacity: 1.0;
}
#progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
}
#display {
    width: 500px;
    height: 150px;
}
div#drop_div {
    width:400px;
    height:300px;
    background:#ccc;
    border:10px dotted #aaa;
    text-align:center;
    font:22px Georgia;
    color:#666;
    line-height:300px;
}

HTML

<input type="file" id="files" name="file" />
<button id="cancel">Cancel read</button>
<ul id="list"></ul>
<div id="drop_div">Drag and drop a file here</div>
<div id="progress_bar">
    <div class="percent">0%</div>
</div>
<div>Base64 encoded result</div>
<textarea id="display"></textarea>

的Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
/*global global */

(function (global) {
    "use strict";

    var reader,
        progress,
        display,
        iFiles,
        bCancel,
        dropZone,
        filebox,
        list;

    function abortRead() {
        if (reader) {
            reader.abort();
        }
    }

    function errorHandler(evt) {
        switch (evt.target.error.code) {
            case evt.target.error.NOT_FOUND_ERR:
                alert("File Not Found!");
                break;
            case evt.target.error.NOT_READABLE_ERR:
                alert("File is not readable");
                break;
            case evt.target.error.ABORT_ERR:
                break; // noop
            default:
                alert("An error occurred reading this file.");
        };
    }

    function updateProgress(evt) {
        // evt is an ProgressEvent.
        if (evt.lengthComputable) {
            var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
            // Increase the progress bar length.
            if (percentLoaded < 100) {
                progress.style.width = percentLoaded + "%";
                progress.textContent = percentLoaded + "%";
            }
        }
    }

    function read(file) {
        var output = [];

        output.push('<li><strong>', escape(file.name), '</strong> (', file.type || 'n/a', ') - ',
        file.size, ' bytes, last modified: ',
        file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a',
            '</li>');

        list.innerHTML = '<ul>' + output.join('') + '</ul>';

        // Reset progress indicator on new file selection.
        progress.style.width = "0%";
        progress.textContent = "0%";

        reader = new FileReader();
        reader.onerror = errorHandler;
        reader.onprogress = updateProgress;
        reader.onabort = function (e) {
            alert('File read cancelled');
        };

        reader.onloadstart = function (e) {
            document.getElementById('progress_bar').className = 'loading';
        };

        reader.onload = function (e) {
            // Ensure that the progress bar displays 100% at the end.
            progress.style.width = "100%";
            progress.textContent = "100%";
            setTimeout("document.getElementById('progress_bar').className='';", 2000);
            display.value = e.target.result;
        }

        // Read in the image file as a binary string.
        reader.readAsDataURL(file);
    }

    function handleFileSelect(evt) {
        read(evt.target.files[0]);
    }

    function handleFileDropSelect(evt) {
        evt.stopPropagation();
        evt.preventDefault();

        read(evt.dataTransfer.files[0]);
    }

    function handleDragOver(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
    }

    global.addEventListener("load", function onLoad() {
        global.removeEventListener("load", onLoad);
        progress = document.querySelector(".percent");
        display = document.getElementById("display");
        iFiles = document.getElementById("files");
        bCancel = document.getElementById("cancel");
        dropZone = document.getElementById("drop_div");
        filebox = document.getElementById("filebox");
        list = document.getElementById("list");

        dropZone.addEventListener("dragover", handleDragOver, false);
        dropZone.addEventListener("drop", handleFileDropSelect, false);
        iFiles.addEventListener("change", handleFileSelect, false);
        bCancel.addEventListener("click", abortRead, false);
    }, false);
}(window));

在jsfiddle

上

Answer 2

我发现这篇文章对我进行了彻底的解释，并且在我实现图像拖放功能时非常有用。

http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/