使用javascript上传不带表单的图像

Upload image without form using javascript?

本文关键字：表单图像 javascript 使用更新时间：2023-09-26

我正在寻找上传图像的最简化方式，将它们插入用户正在键入的文本中。

因此，当用户在文本区域输入时，我希望他能够单击一个图标，打开浏览器的文件浏览对话框。选择一张图片后，我希望它能自动上传，并在文本字段中插入url。

不幸的是，我真的不知道如何解决这个问题。

一个想法是使用一个隐藏的文件输入字段，并使用js"点击"它。但是，在选择图像后，我如何提交隐藏的表单，而不需要额外的提交按钮？

编辑：当然，我想使用ajax将其归档。服务器端应该很容易，因为它只接收数据并返回URL。我需要知道的是如何触发文件浏览器对话框，然后在用户按下"打开"时触发ajax请求。

如果你想在用户输入的地方内联显示图像，这会有点困难，因为你需要模拟一个实际上只是允许用户编辑的div的文本框。我这么说是因为您无法将图像渲染到文本输入或文本区域属性中。

如果这是你想要的，你可能需要喜欢HTML5的浏览器，因为contenteditable将是你想在那里玩的属性。

根据您的时间限制，为了简单起见；我建议在有预览的地方安装类似的系统。你可以有一个样式表单，看起来像他们点击的按钮。<input type="file"/>将为您提供所需的所有浏览功能，从那里您可以将提交操作附加到输入的onchange事件，以将信息发送到后端。