5

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

2 回答 2

4

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

正如MSDN 文档中提到的，您必须阻止对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>
于 2015-09-15T15:53:18.250 回答
-1

在您的代码中，我没有看到您处理 drop 事件？正如微软在其开发人员手册中所述，您需要处理 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.         
  } 
}
于 2013-06-13T08:08:51.017 回答