將文件從本地拖動到瀏覽器

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/