这些天，我们可以拖&将文件放到一个特殊的容器中，并用XHR 2上传它们。与实时进度条等。非常酷的东西。
Example here.
但有时我们不想那么酷。我想要的是拖动&将文件(一次许多)放入标准HTML文件输入：< input type = file multiple> ;. 那可能吗？有什么方法来填充文件输入与正确的文件名(？)从文件下拉？ (完整文件路径不可用于文件系统安全原因。) 为什么？因为我想提交一个正常的表格。适用于所有浏览器和所有设备。拖动&下降只是渐进增强，以增强&简化UX。具有标准文件输入(多属性)的标准格式将存在。我想添加HTML5增强功能。 编辑
我知道在一些浏览器，你有时(几乎总是)将文件放入文件输入本身。我知道Chrome通常这样做，但有时它失败，然后加载当前页面中的文件(如果你填写一个表单，一个大失败)。我想愚弄 – browserproof它。
解决方法
我为此做了一个解决方案。
$(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,.3);
border-radius: 20px;
font-family: Arial;
text-align: center;
position: relative;
line-height: 180px;
font-size: 20px;
color: rgba(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,.5);
color: rgba(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;文件输入只有可见，所以你可以看到发生了什么。
