即使有拖拽事件，IE 10拖放仍会打开文件
即使有拖拽事件，IE 10拖放仍会打开文件
提问于 2013-06-12 08:48:29
在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>回答 2
Stack Overflow用户
发布于 2015-09-15 23:53:18
下面的HTML文件是一个完整的、最小的IE工作示例。(很抱歉，缺少<html>/<body>/etc。样板文件，但测试时不需要该文件。)
正如前面提到的MSDN documentation，您必须阻止对dragover事件的默认操作。只有到那时，才会触发在event参数中包含该文件的drop事件。
<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>Stack Overflow用户
发布于 2013-06-13 16:08:51
在你的代码中，我没有看到你在处理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.
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17056084
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号