如何從DOM發送圖像，作爲表單的一部分

如何附加圖像對象從文檔對象模型，使用JavaScript，以一個表格，以便它可以被髮送到服務器，用戶不必手動使用輸入type = file標籤附加它？

說明：

我需要用戶能夠看到一系列被拉扯中，他粘貼鏈接的預覽網頁上的圖片中，選擇一個，並自動把它附加到一個表單上，用他現在的PHP編寫和處理的文本作爲新帖子的一部分發送，就好像他使用了input type =「file」界面來附加它。

問題是，圖片作爲文檔對象模型的一部分存在於瀏覽器中，它需要以某種方式成爲他的窗體中的附件，並將其文本作爲新帖子提交。我試過做一個隱藏的輸入並且使它的值等於圖像，但是這似乎不起作用。

該解決方案可以在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>

背景： 我正在一個WordPress網站上，使用BuddyPress的，讓用戶無需編輯許可和使用Dashboard來發布自己的鏈接（一拉Digg的和Reddit）。我使用的是一個名爲BuddyBlog的插件（它使用bp-simple-front-end-post）讓用戶做到這一點，這很好...

但是，它的主人也希望預覽時，在URL中，就像它在Facebook上一樣。我沒有發現任何已經集成了這兩個功能（用戶帖子和預覽）的東西，所以我從網絡中抽取了一些開源代碼，通過JSON將它發送到服務器，該服務器通過PHP獲取標題，描述和圖像並將結果作爲格式化的HTML塊發回。然後我抓住這些結果的值，並將其插入到BuddyBlog表單字段...但BuddyBlog的形式通過預期的圖像來它：

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

...我不認爲我可以簡單的設置bp_simple_post_upload_0的值等於圖像的來源[0]

來源

2014-02-13 Kaz Vorpal

您不能設置''元素的值。或者，至少從javascript中修改php中的$ _FILES數組。您可以通過將圖像寫入畫布元素然後使用「畫布」使用JavaScript發送圖像。toDataURL（）'方法來獲得一個base64編碼的圖像字符串，你可以通過一個表單發送它，但它不會像'

如果您已經處理了服務器上的圖像並創建了預覽，這意味着它們已經存在。所以只需傳入代表哪張圖片被選中的變量並獲取相應的圖片。它已經在服務器上。

如果圖像是動態生成的，使用canvas或whatnot，您可以發送它們的base64哈希值。

來源

2014-02-13 22:33:54 NiGhTTraX

- 我正在使用兩種不同的插件，分別爲我完成服務器端工作。我不想對這些插件進行任何修改，特別是buddyblog，這是處理最後一篇文章的內容。本質上，我需要在包含圖像的服務器端有一個字段到達，以便BuddyBlog不知道它與輸入type =「file」附件之間的區別。 –

如何從DOM發送圖像，作爲表單的一部分

回答

相關問題