使用JQuery时拖放不起作用

Question

I'm trying to get the file from a drag 'n drop form. In the drop event I inserted the following:

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

When I use JavaSript for the event handlers, it works fine, but when I use JQuery, I get the following error:

Uncaught TypeError: Cannot read property 'files' of undefined

How can I get the dropped file using JQuery?

JavaScript JSFiddle

JQuery JSFiddle

JavaScript Snippet:

 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); 

 .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; } 

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

JQuery Snippet

 $(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(); }); }); 

 .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; } 

 <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> 

Answer 1

您需要获取原始的js事件对象

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

Answer 2

You can tell jquery to include dataTransfer on the event object by adding this before you define your event handlers:

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

And then in the event handlers you can access the files with evt.dataTransfer.files .

(You may also want to use var files = evt.dataTransfer.files; rather than var files = evt.dataTransfer.files[0]; if you want access to the entire list of dropped files, as opposed to just the first one.)