IE 10拖放仍然打開文件事件雖然IE 10上有dragover事件

，但每次將文件拖動到上傳文件時，仍然會打開文件。如何防止這種情況？我很困惑。請幫忙。由於拖放的原因是「在文件上傳字段中」而不是創建另一個div標籤放置區域？無論如何要使它在上傳領域工作？IE 10拖放仍然打開文件事件雖然IE 10上有dragover事件

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

來源

2013-06-12 Harts

-1

在你的代碼中，我沒有看到你處理丟棄事件？作爲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.   
    } 
}

來源

2013-06-13 08:08:51

這個答案是沒有用的，除非你展示'doNothing'是如何實現的，因爲那是使'drop'事件工作的核心技巧。 – vog

從他鏈接的頁面開始; （event） { event.stopPropagation（）; event.preventDefault（）; }' –

下面的HTML文件是IE一個完整的，最小的工作示例。（對不起失蹤<html>/<body> /等樣板，但你並不需要一個測試。）

如前所述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>

來源

2015-09-15 15:53:18 vog

IE 10拖放仍然打開文件事件雖然IE 10上有dragover事件

回答

相關問題