个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在 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/
25
4
0
我们如何才能使 div 从这里移动到那里。我尝试使用 JQuery 拖放和可排序之类的东西，但我的要求没有得到满足。 我的页面上有很多 DIV，我需要将 DIV_1 拖放到 DIV_2 上，然后应该调
简单表格排序 可以双击编辑 自定义编辑后的 规则 可拖动列进行列替换 可推动边框进行列宽度的缩放 复制代码 代码如下: &n
我有一个元素，我想用鼠标移动它。 var troll = document.getElementById('troll'); troll.addEventListener('dragover', (e
我的问题是如何拖放形状，但要克隆可拖动形状，然后将该克隆拖动到可放置形状。 我是 Konva 的新手。在查看文档和示例时，我可以找到如何拖放形状。 我找到了对形状克隆的引用，但我不确定如何执行此操作。
我正在寻找一个 Java UI 设计器，允许我以 float 模式将控件直接拖放到设计表面(没有 SWT 附带的南北等麻烦)。有没有这样的工具？ 另外，我只对提供试用版的工具感兴趣。 编辑:我只对允许
@ 目录 Excel上传和图片视频上传 Excel上传 页面中的使用 图片和视频
当放置/放置元素(通过从一个 DIV 拖动到另一个 DIV)，然后删除放置的 DIV 中的一个元素时，其中一些元素会更改位置。 这是一个测试场景:http://jsfiddle.net/TcYHW/8
我正在努力做到这一点，以便用户可以将图标从 Web 浏览器拖到他们的桌面，然后创建一个文本文件。我已经了解了内容部分，但我不知道如何设置文件名。我试过改变 dataTransfer.files 但那是
我有一个类似于下面的代码: var dragme = d3.drag() .on("start", function (d) { var variable
前言： 今天一早起床，就一直太阳穴疼，吃了四片去痛片已经无效，真的是疼的直恶心。 如果说学习或者写文章，能够缓解头疼的话，那我想说，我还能坚持一会..... 很久没更新这系列的文章
我是一名优秀的程序员,十分优秀！