on IE 10, everytime I drag the file to the upload filed, it still opening the file. how to prevent this? I'm confused. Please help. Is the cause due to the drag and drop is "in the file upload field" instead of creating another div tag drop area? Is there anyway to make it work on the upload field?
<div id="dnd-upload-box">
<img id="image" src="https://upload.dev/img/elements/drag_drop.jpg" width="100%" height="100%"/>
<?php
echo $this->Form->input('files', array(
'id' => 'file-input-0',
'class' => 'file-input',
'type' => 'file',
'multiple' => 'multiple',
'name' => 'fileselect[]',
'onChange' => 'getFiles(this);'
));
?>
</div>
<script type="text/javascript">
// call initialization file
$(document).ready(function() {
Init();
});
// getElementById
function $id(id) {
return document.getElementById(id);
}
// initialize
function Init() {
var filed = $id("file-input-0");
filed.addEventListener("dragenter", FileDragHover, false);
filed.addEventListener("dragover", FileDragHover, false);
filed.addEventListener("dragleave", FileDragHover, false);
//filed.addEventListener("drop", FileSelectHandler, false);
}
function FileSelectHandler(e) {
// cancel event and hover styling
console.log("selecthandler");
FileDragHover(e);
getFiles(e);
}
// file drag hover
function FileDragHover(e) {
console.log("draghover");
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
}
</script>
The following HTML file is a complete, minimal working example for IE. (Sorry for the missing <html>/<body>/etc. boilerplate, but you don't need that for testing.)
As mentioned MSDN documentation, you have to prevent the default operations on the dragover event. Only then the drop event will fire, containing the file in the event parameter.
<input id="testfilefield" type="file" style="background-color: #777; width:300px; height: 100px;">
<script>
window.addEventListener('load', function() {
var el = document.getElementById('testfilefield');
// Block the "dragover" event
el.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
}, false);
// Handle the "drop" event
el.addEventListener('drop', function(e) {
var firstFile = e.dataTransfer.files[0];
console.log(firstFile);
alert('Drop!');
}, false);
}, false);
</script>
In your code I don't see you handling the drop event? As Microsoft states in their developer manual you need to handle the drop event:
function dropHandler(event)
{
event.stopPropagation();
event.preventDefault();
// Get the file(s) that are dropped.
var filelist = event.dataTransfer.files;
if (!filelist) return; // if null, exit now
var filecount = filelist.length; // get number of dropped files
if (filecount > 0)
{
// Do something with the files.
}
}
来源：https://stackoverflow.com/questions/17056084/ie-10-drag-and-drop-still-opening-the-file-eventhough-there-is-dragover-event