로컬에서 브라우저로 파일을 드래그

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/