现在我们可以把文件拖放到一个特殊的容器中，然后用XHR 2上传。一次很多。实时进度条等。非常酷的东西。例子。
但有时候我们并不想要那么酷。我想要的是拖放文件—许多一次—到一个标准的HTML文件输入:<input type=file multiple>。
这可能吗?是否有一些方法来“填充”文件输入与正确的文件名(?)从文件掉落?(出于文件系统安全原因，不能使用完整的文件路径。)
为什么?因为我想提交一份正常的表格。适用于所有浏览器和所有设备。拖放只是为了增强和简化用户体验的渐进式增强。带有标准文件输入(+多个属性)的标准表单将出现在那里。我想增加HTML5的增强功能。
编辑 我知道在某些浏览器中，有时(几乎总是)可以将文件放入文件输入本身。我知道Chrome通常会这样做，但有时它会失败，然后在当前页面加载文件(如果你正在填写表单，这是一个大失败)。我想愚弄&防浏览器。
当前回答
几年后，我已经构建了这个库来将文件放入任何HTML元素中。
你可以用它
const Droppable = require('droppable');
const droppable = new Droppable({
element: document.querySelector('#my-droppable-element')
})
droppable.onFilesDropped((files) => {
console.log('Files were dropped:', files);
});
// Clean up when you're done!
droppable.destroy();
其他回答
您可以做的是显示一个文件输入，并用透明的下拉区域覆盖它，注意使用像文件[1]这样的名称。{确保在FORM标签中有enctype="multipart/ FORM -data"}
然后让下拉区域通过动态地为文件2创建更多的文件输入来处理额外的文件。Number_of_files，请确保使用相同的基名，适当地填充value-属性。
最后(前端)提交表单。
处理这个方法所需要做的就是修改过程来处理一个文件数组。
这是“DTHML”HTML5的实现方式。标准表单输入(正如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>
如果你能把整个窗口变成一个拖放区，那就更boss了，看看我如何检测进入和离开窗口的HTML5拖放事件，就像Gmail一样?
@BjarkeCK做得很棒。我对他的作品做了一些修改，以使用它作为jquery的方法:
$.fn.dropZone = function() {
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = this[0];
var $dropZone = $(dropZone);
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[type='file']");
dropZone.addEventListener("dragleave", function() {
this.classList.remove(mouseOverClass);
});
dropZone.addEventListener("dragover", function(e) {
console.dir(e);
e.preventDefault();
e.stopPropagation();
this.classList.add(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);
dropZone.addEventListener("drop", function(e) {
this.classList.remove(mouseOverClass);
}, true);
}
$('#drop-zone').dropZone();
工作小提琴
几年后，我已经构建了这个库来将文件放入任何HTML元素中。
你可以用它
const Droppable = require('droppable');
const droppable = new Droppable({
element: document.querySelector('#my-droppable-element')
})
droppable.onFilesDropped((files) => {
console.log('Files were dropped:', files);
});
// Clean up when you're done!
droppable.destroy();
使用它吧。(Html - Css);)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.upload-container {
position: relative;
}
.upload-container input {
border: 1px solid #92b0b3;
background: #f1f1f1;
outline: 2px dashed #92b0b3;
outline-offset: -10px;
padding: 100px 0px 100px 250px;
text-align: center !important;
width: 500px;
}
.upload-container input:hover {
background: #ddd;
}
.upload-container:before {
position: absolute;
bottom: 50px;
left: 245px;
content: " (or) Drag and Drop files here. ";
color: #3f8188;
font-weight: 900;
}
.upload-btn {
margin-left: 300px;
padding: 7px 20px;
}
</style>
<script>
function uploadFiles() {
var files = document.getElementById('file_upload').files;
if(files.length==0){
alert("Please first choose or drop any file(s)...");
return;
}
var filenames="";
for(var i=0;i<files.length;i++){
filenames+=files[i].name+"\n";
}
}
</script>
</head>
<body>
<div class="upload-container">
<input type="file" id="file_upload" multiple />
</div>
<br>
<button class="upload-btn" onclick="uploadFiles()">Submit</button>
</body>
</html>
