将文件从本地拖动到浏览器

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函数的类型列表是空的（它是空在某些浏览器），但为什么要检查内容？您可以在拖放功能中检查它。

一定要使用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/