Question

我想从本地将jpg拖放到浏览器，并将其显示在浏览器上。

我编写了代码，但它没有显示jpg。

请建议。

HTML

<img id="img1" ondragover="doDragOver(event);"
               ondrop="doDrop(event);" 
               class="droppable">

CSS

.droppable {
        width:500px;
        height:500px;
        background-color: gray;
}

脚本

function doDragOver(event){
    var type = event.dataTransfer.types.contains("Files");
    if (type){
        event.preventDefault();
    }
}

function doDrop(event){
    var img = document.getElementById("img1");
    var file = event.dataTransfer.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
        img.src = reader.result;
    }
}

Answer 1

问题是dragOver函数类型列表是空的（在某些浏览器中它是空的），但为什么检查它的内容？你可以在drop函数中查看它。

请务必使用event.preventDefault();和return false

取消默认的浏览器行为

代码：

function doDragOver(event) {
    event.preventDefault();
    return false
}

function doDrop(event) {
    event.preventDefault();
    var img = document.getElementById("img1");
    var file = event.dataTransfer.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        img.src = reader.result;
    }
}

演示：http://jsfiddle.net/IrvinDominin/Up2NF/

将文件从本地拖到浏览器

1 个答案: