如何上載我們已經打印在DOM上的圖像？

我正在通過網址上傳圖片，我看了into this。我使用自定義搜索從谷歌圖像中讀取圖像並將其打印在DOM上，我希望能夠選擇我看到的圖像並將它們設置爲值或可以將其上載到我的服務器上。如何上載我們已經打印在DOM上的圖像？

HTML DOM我得到的是：

<button type="button"> 
    <img src="http://img.jpg"> 
</button> 
<button type="button"> 
    <img src="http://img2.jpg"> 
</button> 
<button type="button"> 
    <img src="http://img3.jpg"> 
</button> 

    Select images: <input type="file" name="img" multiple> 
    <input type="submit">

如何點擊按鈕IMG並將它們設置爲要上傳的文件？發送整個頁面的PHP部分很好。

來源

2017-01-01 rob.m

您實際上沒有上傳圖像文件，因爲它們駐留在另一臺服務器上。

當你在頁面上顯示圖像後，你必須實現你的客戶端選擇邏輯並將圖像url保存到一個數組或隱藏的輸入字段，這取決於你想要使用ajax還是通常的回發將它們保存在服務器上。

下面是JavaScript example如何選擇圖像，並將它們存儲到一個數組或什麼：

$(function() { 
 
var imageUrls = []; 
 
$(".imageContainer img").on("click", function() { 
 
\t var $img = $(this); 
 
    var url = $img.attr("src"); 
 
\t var index = imageUrls.indexOf(url); 
 
    
 
\t if (index === -1) { 
 
\t \t imageUrls.push(url); 
 
     $img.addClass("selected"); 
 
\t } else { 
 
\t \t imageUrls.splice(index, 1); 
 
     $img.removeClass("selected"); 
 
\t } 
 
    
 
    console.dir(JSON.stringify(imageUrls)); 
 
}) 
 
});

div{ 
 
    margin-top:60px; 
 
} 
 

 
img{ 
 
    height:80px; 
 
} 
 

 
.selected{ 
 
    border: 3px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
<div class="imageContainer"> 
 
\t <img src="http://i.imgur.com/nN8NqpI.gif" /> 
 
\t <img src="http://i.imgur.com/vj8HEPl.jpg" /> 
 
</div> 
 
</body> 
 
</html>

轉化中的URL發送到服務器要看，如果你想使用AJAX或正常的回發。

在服務器上你可以做這樣的事情（C＃），我不知道PHP API。但這裏重要的是，你只需要提交網址，沒有要上傳的文件！

using (WebClient client = new WebClient()) 
{ 
    foreach (var url in urlArray) 
    { 
    client.DownloadFileAsync(url, "aNameForTheImage"); 
    } 
}

來源

2017-01-01 12:32:46 Legends

@ rob.m提到，服務器端實現PHP –

UPS ...：d，你是對的，他應該使用PHP相當於然後：o – Legends

不管怎麼說，他已經收集客戶端上的網址一邊通過JavaScript併發送網址到服務器。他已經知道，如何在php中使用serverside。 – Legends

如何上載我們已經打印在DOM上的圖像？

回答

相關問題