在 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>
最佳答案
以下 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>
关于internet-explorer - 即使有拖拽事件，IE 10 拖放仍然打开文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17056084/