javascript - jquery拖曳選取 - w3school drag and drop



如何使用jQuery的drop事件上傳從桌面拖出的文件? (1)

是否可以使用jQuery的drop事件從桌面拖動文件?

如果是這樣,我如何獲取刪除的文件數據?


它有點亂(你需要處理至少3個​​事件)但可能。

首先,您需要為dragoverdragenter添加事件dragover ,並阻止這些事件的默認操作:

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

然後,您可以添加drop-handler並使用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/





drag-and-drop