使用JQuery

Question

我试图从拖放表单中获取文件。在drop事件中，我插入了以下内容：

var files = evt.dataTransfer.files[0];

当我将JavaSript用于事件处理程序时，它工作正常，但是当我使用JQuery时，我收到以下错误：

  

未捕获的TypeError：无法读取属性＆＃39;文件＆＃39;未定义的

如何使用JQuery获取删除的文件？

JavaScript JSFiddle

JQuery JSFiddle

JavaScript代码段

＆＃13;

＆＃13;

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files[0];
    console.log(files);
}

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

＆＃13;

.example {
    padding: 10px;
    border: 1px solid #ccc;
}
#drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold 'Vollkorn';
    color: #bbb;
}

＆＃13;

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

＆＃13;

＆＃13;

＆＃13;

JQuery代码段

＆＃13;

＆＃13;

$(document).ready(function () {
    $('#drop_zone').on('drop', function (evt) {
        evt.stopPropagation();
        evt.preventDefault();

        var files = evt.dataTransfer.files[0];
        console.log(files);
    });

    $('#drop_zone').on('dragover', function (evt) {
        evt.stopPropagation();
        evt.preventDefault();
    });
});

＆＃13;

.example {
    padding: 10px;
    border: 1px solid #ccc;
}
#drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold'Vollkorn';
    color: #bbb;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drop_zone">Drop files here</div>
<output id="list"></output>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你需要获得原始的js事件对象

var files = evt.originalEvent.dataTransfer.files[0];

Answer 2

您可以通过在定义事件处理程序之前添加此事件来告诉jquery在事件对象中包含dataTransfer：

$.event.props.push("dataTransfer");

然后在事件处理程序中，您可以使用evt.dataTransfer.files访问文件。

（如果您想要访问整个已删除文件列表，您可能还想使用var files = evt.dataTransfer.files;而不是var files = evt.dataTransfer.files[0];，而不是仅使用第一个。）