这些天我们可以将文件拖放到一个特殊的容器中,然后用XHR 2上传它们 . 有现场进度条等非常酷的东西 . Example here.
但有时候我们不喜欢拖放文件 - 一次很多 - into a standard HTML file input : <input type=file multiple>
.
那可能吗?有没有办法用文件丢弃中的正确文件名(?)“填充”文件输入? (出于文件系统安全原因,完整文件路径不可用 . )
Why? 因为我想提交一份正常的表格 . 适用于所有浏览器和所有设备 . 拖放只是渐进式增强,以增强和简化用户体验 . 标准文件输入( multiple
属性)的标准表格将在那里 . 我想添加HTML5增强功能 .
edit
我知道在 some 浏览器中你可以 sometimes (几乎总是)将文件放入文件输入本身 . 我知道Chrome通常会这样做,但有时它会失败然后将文件加载到当前页面中(如果您填写表单,则会失败) . 我想傻瓜和浏览器一样 .
12 回答
我为此做了一个解决方案 .
此方法的拖放功能仅适用于Chrome,Firefox和Safari . (不知道它是否适用于IE10),但对于其他浏览器,“或点击此处”按钮工作正常 .
在区域上拖动文件时,输入字段只需跟随鼠标,我也添加了一个按钮 .
取消注释不透明度:0;文件输入仅可见,因此您可以看到正在发生的事情 .
以下适用于Chrome和FF,但我还没有找到涵盖IE10的解决方案:
您可能希望使用
addEventListener
或jQuery(等)来注册您的evt处理程序 - 这只是为了简洁起见 .对于那些希望在2018年实现这一目标的人来说,我有一个更好更简单的解决方案,然后在这里发布所有旧东西 . 只需使用vanilla HTML,JavaScript和CSS,您就可以创建一个漂亮的拖放框 .
(目前仅适用于Chrome)
让我们从HTML开始 .
然后我们将进入造型 .
你做完之后它看起来已经很好了 . 但我想你想看看你上传的文件是什么,所以我们要做一些JavaScript . 还记得pfp值 Span 吗?这就是我们打印出文件名的地方 .
就是这样 .
这是“DTHML”HTML5的方式 . 正常形式输入(仅作为Ricardo Tomasi指出的读取) . 然后,如果拖入文件,它将附加到表单 . 这将需要修改操作页面以接受以这种方式上传的文件 .
如果你可以让整个窗口成为一个放置区,那就更加老板了,参见How do I detect a HTML5 drag event entering and leaving the window, like Gmail does?
理论上,您可以添加一个覆盖
<input/>
的元素,然后使用它的drop
事件来捕获文件(使用File API)并将它们传递给输入files
数组 .除了文件输入是 read-only . 这是一个老问题 .
但是,您可以完全绕过表单控件并通过XHR上传(不确定是否支持):
https://developer.mozilla.org/en/Using_files_from_web_applications
http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob
您还可以使用周围区域中的元素取消Chrome中的放置事件,并防止加载文件的默认行为 .
在输入上删除多个文件已经可以在Safari和Firefox中使用 .
我知道Chrome中有一些技巧可行 .
当您将文件放入放置区时,您会得到一个dataTransfer.files对象,它是一个“FileList”类型的对象,它包含您拖动的所有文件 . 同时,element具有属性“files”,即相同的“FileList”类型对象 .
因此,您可以简单地将dataTransfer.files对象分配给input.files属性 .
对于仅CSS的解决方案:
修改自https://codepen.io/Scribblerockerz/pen/qdWzJw
@BjarkeCK的精彩作品 . 我对他的工作进行了一些修改,将它用作jquery中的方法:
Working Fiddle
几年后,我已经构建this library来将文件放入任何HTML元素中 .
你可以像使用它一样
这就是我的结果 .
使用Jquery和Html . 这会将它添加到插入文件中 .
您可以做的是显示文件输入并将其覆盖在您的透明放置区域,小心使用像
file[1]
这样的名称 . {一定要enctype="multipart/form-data"
在您的FORM标签内 . }然后让drop-area通过为文件2..number_of_files动态创建更多文件输入来处理额外文件,请确保使用相同的基本名称,正确填充value-attribute .
最后(前端)提交表格 .
处理此方法所需的只是更改处理文件数组的过程 .