在不使用输入文件的情况下将图像从PC添加到页面

Question

twitter如何能够在不使用<input type='file>的情况下将图像添加到页面。

例如

我尝试查看他们的源代码以更好地了解他们如何做到这一点，但是在了解如何做到这一点上还没有走运，似乎他们无需使用<input type='file'>就可以做到这一点如果你们可以给我链接到一篇文章或代码示例，介绍如何完成此操作。我将非常感谢。

Answer 1

我只是看到Twitter正在使用<div contenteditable="true"></div>并带有某些样式和脚本。在元素上添加contenteditable属性，使您可以直接在元素内部进行编辑，也可以从计算机中插入图像。

了解有关contenteditable change events的更多信息，其余一切取决于您。有多种不使用<input>和<form>元素而将数据发送到服务器的方法，例如使用Ajax。

以下是示例https://jsfiddle.net/sxanyar/9zdjq4rv/

Answer 2

这比仅使用输入更为复杂。但是，对于上传部分，可以使用https://www.dropzonejs.com/。 DropzoneJS是一个开放源代码库，可提供拖放文件上传以及图像预览。

Answer 3

您可以搜索更多示例拖放附件。 下面是2个常见的组件，用于拖动n拖放。

https://bootsnipp.com/snippets/D7MvX

https://mdbootstrap.com/plugins/jquery/file-upload/