jQuery의 drop 이벤트를 사용하여 바탕화면에서 끌어온 파일을 업로드하는 방법은?

jQuery의 drop 이벤트를 사용하여 바탕화면에서 끌어온 파일을 업로드하는 방법은?

jQuery's를 사용할 수 있습니까?drop데스크톱에서 파일을 끌어오기 위한 이벤트?

그렇다면 삭제된 파일 데이터는 어떻게 가져오나요?

조금 지저분하지만(이벤트는 최소 3개 이상 처리해야 함) 가능합니다.

먼저 다음에 대한 이벤트 핸들러를 추가해야 합니다.dragover그리고.dragenter다음과 같은 이벤트에 대한 기본 작업을 방지합니다.

$('#div').on(
    'dragover',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)
$('#div').on(
    'dragenter',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)

사실 전화하는 게 중요합니다.preventDefault이러한 이벤트들에, 그렇지 않으면, 일부 브라우저들은 결코 트리거하지 않을 수 있습니다.drop이벤트성의

그런 다음 드롭 핸들러를 추가하고 드롭된 파일에 액세스할 수 있습니다.e.originalEvent.dataTransfer.files:

$('#div').on(
    'drop',
    function(e){
        if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            /*UPLOAD FILES HERE*/
            upload(e.originalEvent.dataTransfer.files);
        }
    }
);

이제 div의 데스크톱/익스플로러/파인더에서 파일을 끌어와 액세스할 수 있습니다.

http://jsfiddle.net/fSA4N/5/

언급URL : https://stackoverflow.com/questions/9544977/how-to-use-jquerys-drop-event-to-upload-files-dragged-from-the-desktop