IE 10拖放仍然打开文件eventhough有dragover事件 [英] IE 10 drag and drop still opening the file eventhough there is dragover event
问题描述
在IE 10，每次我拖动文件到上传文件，它仍然打开文件。如何防止这种情况？我很困惑。请帮忙。是因为拖放的原因是在文件上传字段而不是创建另一个div标记放置区域？是否仍然要在上传字段中使用它？
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>
推荐答案
以下HTML文件是一个完整的，为IE。 （对不起，缺少< html> / < body> / etc。需要用于测试。）
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.)
如前所述 MSDN文档，您必须阻止 dragover 事件的默认操作。只有这样， drop 事件将触发，包含事件参数中的文件。
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>
这篇关于IE 10拖放仍然打开文件eventhough有dragover事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
