拖放文件到标准的html文件输入 [英] drag drop files into standard html file input
问题描述
但是有时我们不希望那么酷。我想要的是拖拽将文件（一次许多）放入标准HTML文件输入中：< input type = file multiple> 。
可以吗？有没有办法使用正确的文件名（？）从文件中填写文件输入？ （完整的文件路径不适用于文件系统安全性原因。）
为什么？因为我想提交一个正常的表单。适用于所有浏览器和所有设备。拖曳下降只是逐步增强，以增强和简化UX。具有标准文件输入（+ multiple 属性）的标准表单将在那里。我想添加HTML5增强功能。
编辑
我知道在一些浏览器您可以有时（几乎总是）将文件放入文件输入本身。我知道Chrome通常会执行此操作，但有时会失败，然后在当前页面中加载该文件（如果填写表单，则会失败）。我想愚弄
我为此提供了解决方案。
div class =snippetdata-lang =jsdata-hide =truedata-console =truedata-babel =false>
$（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（） ; 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
＃drop-zone {/ *重要排序* / width：300px; / *重要排序* / height：200px;位置：绝对的;左：50％;顶：100px的;保证金左：-150px; border：2px rgba（0,0,0，.3）; border-radius：20px; font-family：Arial; text-align：center;位置：亲戚; line-height：180px; font-size：20px; color：rgba（0,0,0，.3）;}＃drop-zone input {/ * Important * / position：absolute; / * Important * / cursor：pointer;左：0px;顶部：0px; / *重要这只是为了演示目的留言。不透明度：0; * /} / * Important * /＃drop-zone.mouse-over {border：2px dotted rgba（0,0,0，.5）;颜色：rgba（0,0,0，.5）; } / *如果你不想要按钮* /＃clickHere {position：absolute; cursor：pointer;左：50％;顶部：50％; margin-left：-50px; margin-top：20px; line-height：26px;颜色：白色; 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>在这里删除文件...< div id =clickHere>或者点击这里..< input type =filename =fileid =file/> < / div>< / div>
此方法的删除功能仅适用于Chrome，Firefox和Safari。
（不知道它是否适用于IE10），但是对于其他浏览器，或点击此处按钮可以正常工作。
输入字段简单在一个区域拖动文件时，按住鼠标，我也添加了一个按钮。
取消注释不透明度：0;文件输入仅可见，以便您可以看到发生了什么。
These days we can drag & drop files into a special container and upload them with XHR 2. Many at a time. With live progress bars etc. Very cool stuff. Example here.
But sometimes we don't want that much coolness. What I'd like is to drag & drop files -- many at a time -- into a standard HTML file input: <input type=file multiple>.
Is that possible? Is there some way to 'fill' the file input with the right filenames (?) from the file drop? (Full filepaths aren't available for file system security reasons.)
Why? Because I'd like to submit a normal form. For all browsers and all devices. The drag & drop is just progressive enhancement to enhance & simplify UX. The standard form with standard file input (+ multiple attribute) will be there. I'd like to add the HTML5 enhancement.
edit
I know in some browsers you can sometimes (almost always) drop files into the file input itself. I know Chrome usually does this, but sometimes it fails and then loads the file in the current page (a big fail if you're filling out a form). I want to fool- & browserproof it.
I made a solution for this.
$(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>
The Drag and Drop functionality for this method only works with Chrome, Firefox and Safari. (Don't know if it works with IE10), but for other browsers, the "Or click here" button works fine.
The input field simply follow your mouse when dragging a file over an area, and I've added a button as well..
Uncomment opacity:0; the file input is only visible so you can see what's going on.
这篇关于拖放文件到标准的html文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
