Javascript 如何将图像作为表单的一部分从DOM发送

短版：

如何使用JavaScript将文档对象模型中的图像对象附加到表单，以便将其发送到服务器，而用户不必使用input type=file标记手动附加它

说明：

我需要一个用户能够查看网页上的一系列图片，这些图片是作为他粘贴的链接的预览拉进来的，选择一个，并将其自动附加到表单上，与他编写的文本一起发送，并由现有PHP处理，作为新帖子的一部分，就像他使用输入type=“file”界面附加它一样

问题在于，pic作为文档对象模型的一部分存在于浏览器中，它需要以某种方式成为他的表单的附件，与他的文本一起作为新帖子提交。我试着做一个隐藏的输入，使其值等于图像，但这似乎不起作用

解决方案可以是jQuery，也可以是手工编码的，我已经使用JavaScript 18年了，所以我可以理解其中任何一种……我只是不知道如何将DOM对象作为文件附加到服务器上，然后作为表单的一部分进行处理

示例代码：

这不是实际的代码，它很复杂，需要使用JSON在PHP中提取URL预览并将其发送回用户，但它总结了问题：

<img id="image[0]" src="images/image0.jpg" onclick="attachimage(0)"/>
<img id="image[1]" src="images/image1.jpg" onclick="attachimage(1)"/>
<img id="image[2]" src="images/image2.jpg" onclick="attachimage(2)"/>
<form method="post">
    <input type="text" name="title"/>
    <textarea name="description"></textarea>
    <input type="hidden" name="theimage" id="theimage">
    <input type="submit" name="post" value="save">
</form>
<script>
    var attachimage = function(item) {
        // So far, nothing like this next line has worked for me,
        // the image never shows up in the saved post
        $("#theimage").val(document.getElementById("image[" + item + "]"));
    }
</script>

var attachimage=功能（项目）{
//到目前为止，下一行对我来说都不管用，
//该图像从未显示在保存的帖子中
$（“#theimage”）.val（document.getElementById（“image[”+item+“]））；
}

上下文： 我正在开发一个Wordpress网站，使用BuddyPress，允许用户在没有编辑许可和使用仪表板的情况下发布自己的链接（a-la Digg和Reddit）。我正在使用一个名为BuddyBlog的插件（它使用bp simple front end post）来让用户实现这一点，它运行良好

但店主也希望在粘贴URL时出现预览，就像在Facebook上一样。我没有发现任何东西已经集成了这两个功能（用户帖子和预览），因此我从web上提取了一些开源代码，获取URL，通过JSON将其发送到服务器，服务器通过PHP获取标题、描述和图像，并将结果作为格式化的HTML块发送回去。然后，我获取这些结果的值并将其插入BuddyBlog表单字段……但是BuddyBlog表单预期图像通过以下方式到达：

<input type="file" name="bp_simple_post_upload_0">

---

…我不认为我可以简单地将bp_simple_post_upload_0的值设置为等于图像的源[0]

如果您已经在服务器上处理了图像并创建了预览，这意味着它们已经存在。因此，只需传入一些表示所选图片的变量，就可以得到相应的图像。它已经在服务器上了

---

如果图像是动态生成的，包括画布之类的，您可以发送它们的base64散列。

您不能设置

元素的值。或者至少从javascript修改php中的

$\u文件

数组。您可以使用javascript发送图像，方法是将图像写入画布元素，然后使用

canvas.toDataURL（）

方法获取图像的base64编码字符串，您可以通过表单发送该字符串，但它不会像

那样在php中填充

$\u文件

数组。除此之外，您还可以发送图像url并在php中下载文件，并在调用bp之前手动填充$\u文件数组。-我使用两个不同的插件，分别为我执行服务器端工作。我不想修改那些插件，特别是buddyblog，它正在处理最后一篇文章。从本质上讲，我需要在包含映像的服务器端提供一个字段，以便BuddyBlog不知道它与输入type=“file”附件之间的区别。