파일 시스템 이미지를 브라우저로 끌 수 없습니다.

Question

HTML5 파일 API를 실험하고 있습니다. 그러나 브라우저에 이미지를 드래그하면 이미지가 표시되는 기본 동작이 브라우저에 있음을 알 수 있습니다. 그러나 이미지를 보지 않고 이미지를 업로드하는 것이 목표라면이 작업은 성가신 일입니다.

이 동작을 방지하는 방법이 있는지 궁금합니다. 다소 효과가있는 ondrop 이벤트에서 stopPropagation/preventDefault를 시도했지만 이미지가 페이지의 아무 곳이나 드롭 될 수 있다는 인상을주는 "드롭"커서를 남겨 둡니다.

이미지를 놓을 지정된 영역에 "놓기"커서가있는 것이 가장 이상적입니다.

Answer 1

dataTransfer 객체는 dropEffect를 effectAllowed 및 특성을 갖는다. 정확히 무엇이 그들 사이의 차이인지는 모르겠지만 'none'으로 설정하면 도움이됩니다.

$(document).bind({ 
    dragenter: function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var dt = e.originalEvent.dataTransfer; 
    dt.effectAllowed = dt.dropEffect = 'none'; 
    }, 
    dragover: function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var dt = e.originalEvent.dataTransfer; 
     dt.effectAllowed = dt.dropEffect = 'none'; 
    } 
}); 

- 사각형 만 허용 드롭을 참조하십시오.

Answer 2

아마도 이것이 당신이 찾고있는 것입니까? 나는 이것을 직접 디자인했다.

http://rightandrong.info/html5upload/Upload.html