Question

在IE 10上，每次我将文件拖到上传文件时，它仍然会打开文件。怎么预防这个？我糊涂了。请帮忙。拖放导致的原因是“在文件上传字段中”而不是创建另一个div标签丢弃区域吗？反正有没有让它在上传领域工作？

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

Answer 1

以下HTML文件是IE的完整，最小化的工作示例。（抱歉缺少<html> / <body> / etc。样板，但您不需要进行测试。）

如上所述MSDN documentation，您必须阻止dragover事件的默认操作。只有这样，才会触发drop事件，其中包含event参数中的文件。

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

Answer 2

在你的代码中，我没有看到你处理drop事件？作为Microsoft states in their developer manual，你需要处理drop事件：

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

IE 10拖放仍然打开文件，即使有dragover事件

2 个答案: