Question

简短版

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

说明

我需要一个用户能够查看网页上的一系列图片，这些图片作为他粘贴的链接的预览被拉入，选择一个，并将其自动附加到表单，以便与他作为新帖子的一部分由现有PHP编写和处理的文本，就像他使用输入类型=＆＃34;文件＆＃34;用于附加它的界面。

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

解决方案可以是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>

背景： 我正在使用BuddyPress在Wordpress网站上工作，允许用户在没有编辑权限和使用仪表板的情况下发布他们自己的链接（a-la Digg和Reddit）。我使用一个名为BuddyBlog的插件（使用bp-simple-front-end-post）让用户这样做，这很好......

但是所有者还希望在粘贴网址时出现预览，就像在Facebook上一样。我发现没有任何东西已经集成了这两个功能（用户帖子和预览），所以我从Web上提取了一些带有URL的开源代码，通过JSON将其发送到服务器，通过PHP获取标题，描述和图像并将结果作为格式化的HTML块发回。然后我抓住这些结果的值并将它们插入到BuddyBlog表单字段中......但是BuddyBlog的形式通过以下方式预测到它的图像：

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

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

Answer 1

如果您已经处理了服务器上的图像并创建了预览，则意味着它们已经存在。因此，只需传入表示选择了哪个图片的变量，然后获取相应的图像。它已经在服务器上了。

如果使用画布或诸如此类动态生成图像，则可以发送它们的base64哈希值。

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

1 个答案: