可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

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>

回答2:

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