拖放文件到标准的html文件输入
拖放文件到标准的html文件输入
提问于 2011-11-04 16:42:14
如今，我们可以将文件拖放到一个特殊的容器中，然后使用XHR 2上传文件。带有实时进度条等。非常酷的东西。Example here.
但有时我们并不想要那么多的酷劲。我想要的是将文件一次拖放到一个标准的文件输入：<input type=file multiple>中。
这有可能吗？有没有办法用正确的文件名(?)“填充”文件输入？从文件下载开始？(出于文件系统安全的原因，完整的文件路径不可用。)
为什么？因为我想提交一个普通的表单。适用于所有浏览器和所有设备。拖放只是增强和简化用户体验的渐进式增强。具有标准文件输入(+ multiple属性)的标准表单将在那里。我想添加HTML5增强功能。
编辑
我知道在中，一些浏览器，你可以，有时(几乎总是)拖放文件到文件输入本身。我知道Chrome通常会这样做，但有时它会失败，然后在当前页面中加载文件(如果你正在填写表单，这是一个很大的失败)。我想愚弄它-&防止它被浏览器浏览。
回答 14
Stack Overflow用户
回答已采纳
发布于 2016-08-16 15:29:11
下面的代码可以在Chrome和FF上运行，但是我还没有找到一个可以覆盖IE10+的解决方案：
// dragover and dragenter events need to have 'preventDefault' called
// in order for the 'drop' event to register.
// See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
evt.preventDefault();
};
dropContainer.ondrop = function(evt) {
// pretty simple -- but not for IE :(
fileInput.files = evt.dataTransfer.files;
// If you want to use some of the dropped files
const dT = new DataTransfer();
dT.items.add(evt.dataTransfer.files[0]);
dT.items.add(evt.dataTransfer.files[3]);
fileInput.files = dT.files;
evt.preventDefault();
};<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
Drop Here
</div>
Should update here:
<input type="file" id="fileInput" />
</body>
</html>
您可能希望使用addEventListener或jQuery (等)。来注册你的evt处理程序--这只是为了简单起见。
Stack Overflow用户
发布于 2012-10-04 01:08:05
我为此做了一个解决方案。
$(function () {
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
var inputFile = dropZone.find("input");
document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({ top: y - 15, left: x - 100 });
} else {
inputFile.offset({ top: -400, left: -400 });
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function (e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({ top: y - 15, left: x - 160 });
} else {
inputFile.offset({ top: -400, left: -400 });
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function (e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
})#drop-zone {
/*Sort of important*/
width: 300px;
/*Sort of important*/
height: 200px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
border: 2px dashed rgba(0,0,0,.3);
border-radius: 20px;
font-family: Arial;
text-align: center;
position: relative;
line-height: 180px;
font-size: 20px;
color: rgba(0,0,0,.3);
}
#drop-zone input {
/*Important*/
position: absolute;
/*Important*/
cursor: pointer;
left: 0px;
top: 0px;
/*Important This is only comment out for demonstration purposes.
opacity:0; */
}
/*Important*/
#drop-zone.mouse-over {
border: 2px dashed rgba(0,0,0,.5);
color: rgba(0,0,0,.5);
}
/*If you dont want the button*/
#clickHere {
position: absolute;
cursor: pointer;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: 20px;
line-height: 26px;
color: white;
font-size: 12px;
width: 100px;
height: 26px;
border-radius: 4px;
background-color: #3b85c3;
}
#clickHere:hover {
background-color: #4499DD;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="drop-zone">
Drop files here...
<div id="clickHere">
or click here..
<input type="file" name="file" id="file" />
</div>
</div>
此方法的拖放功能仅适用于Chrome、Firefox和Safari。(不知道它是否适用于IE10)，但对于其他浏览器，“或单击此处”按钮可以很好地工作。
当在某个区域上拖动文件时，输入字段只需跟随鼠标移动，我还添加了一个按钮。
取消注释不透明度:0；文件输入仅可见，因此您可以看到发生了什么。
Stack Overflow用户
发布于 2013-04-08 21:46:16
这就是"DTHML“HTML5的方法。Normal form input (如Ricardo Tomasi指出的只读)。然后，如果文件被拖入，它将被附加到窗体。这将需要修改操作页面以接受以这种方式上传的文件。
function readfiles(files) {
for (var i = 0; i < files.length; i++) {
document.getElementById('fileDragName').value = files[i].name
document.getElementById('fileDragSize').value = files[i].size
document.getElementById('fileDragType').value = files[i].type
reader = new FileReader();
reader.onload = function(event) {
document.getElementById('fileDragData').value = event.target.result;}
reader.readAsDataURL(files[i]);
}
}
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.preventDefault();
readfiles(e.dataTransfer.files);
}#holder.hover { border: 10px dashed #0c0 !important; }<form method="post" action="http://example.com/">
<input type="file"><input id="fileDragName"><input id="fileDragSize"><input id="fileDragType"><input id="fileDragData">
<div id="holder" style="width:200px; height:200px; border: 10px dashed #ccc"></div>
</form>
如果你能让整个窗口变成一个拖放区，那就更好了，参见How do I detect a HTML5 drag event entering and leaving the window, like Gmail does?
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8006715
复制相关文章
相似问题
腾讯云开发者
