如今,我们可以将文件拖放到一个特殊的容器中,并使用XHR2上载它们。带有实时进度条等。非常酷的东西。
但是有时候我们不想要那么酷。我想要的是一次将文件拖放 到标准HTML文件输入中 :<input type=file multiple>。
<input type=file multiple>
那可能吗?有什么方法可以从文件拖放中用正确的文件名(?)“填充”文件输入吗?(出于文件系统安全性原因,完整的文件路径不可用。)
为什么? 因为我想提交一份普通表格。适用于所有浏览器和所有设备。拖放只是渐进式增强,可以增强和简化UX。具有标准文件输入(+ multiple属性)的标准表单将在那里。我想添加HTML5增强功能。
multiple
编辑 我知道在 某些 浏览器中,您有时可以(几乎总是)将文件拖放到文件输入本身中。我知道Chrome通常会执行此操作,但有时会失败,然后将文件加载到当前页面中(如果您要填写表单,则会导致很大的失败)。我想傻瓜和浏览器证明。
以下内容适用于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处理程序-这只是为了简便起见。
addEventListener