使用HTML，CSS和Javascript將圖像上傳到圖像集合

-2

我有一個div，在其中我加載了下面的代碼所在的文件夾中的所有圖像。我還有一個文本框，在其中可以輸入任何圖像URL（例如：http://images.mentalfloss.com/sites/default/files/styles/article_640x430/public/happy-first-birthday.png），當點擊新圖像時，該按鈕應顯示在具有其他圖像的現有div頂部。使用HTML，CSS和Javascript將圖像上傳到圖像集合

我嘗試了評論的代碼，但沒有運氣。我認爲該頁面正在刷新，圖像正在消失。

的jQuery：

<script type="text/javascript"> 
     $(document).ready(function() { 

      for (var i = 0; i <= data[i].photo_url.length; i++) { 
       //alert(data[i].name); 
       $("#loadIMG").append($("<div class='col-xs-6 divImg' <p > <img ALIGN='top' src=" + data[i].photo_url + "></img> " + data[i].name + "</p>")); 
      } 

//   $("button").click(function() { 
//    alert($('#url').val()); 
//    var imgURL = $('#url').val(); 
//    $("#loadIMG").append($("<div class='divImg' <p> <img ALIGN='top' src=" + imgURL + "></img></p>")); 
//    //$("#loadIMG").html("<img src='" + imgURL + "' alt='description' />"); 
//   }); 

     }); 
    </script>

HTML：

<div id="main-content"> 
     <form> 
      <label class="label"> 
       Photo URL</label> 
      <input class="input" name="photo_url" id="url" /> 
     </div> 
     <button id="btnCreate">`enter code here` 
      Create</button>`enter code here` 
     <!--<input type="button" id="btnCreate" value="Create" class="button" />--> 
     <hr /> 
     </form> 
     <div class="row" id="loadIMG"> 
     </div> 
    </div> 
</body>

問題：如果我把它具有圖像的一些谷歌的網址，輸入文本和按鈕單擊應該顯示下面的圖像以及其他圖像。我怎麼能做到這一點？我試圖用評論代碼附加到div，但圖像不顯示。 [屏幕參考

來源

2015-04-28 Sunny

你想從我們這裏得到什麼？你現在到底做了什麼？問題在哪裏？你對我們有什麼期望？做你的工作？請添加一個問題並解釋您的問題是什麼。此外，您似乎是新來的，請使用「編輯」按鈕來實現，不要使用回答功能。 –

對於初學者來說，你甚至沒有關閉第一個DIV支架'

' AND you're not closing the div at the end '

'這會在DOM –

@CagatayUlubay中創建這樣一個混亂的網絡，他的嘗試是在問題主體中，你需要在打字之前真正閱讀問題廢話 –

您需要防止提交表單的默認操作：

$("button").click(function (e) { 
     e.preventDefault(); 
     /** the rest of your button's on-click code **/ 
});

來源

2015-04-28 15:13:08 STLMikey

這裏是小提琴演示http://jsfiddle.net/rofp9tk2/1/ – Turnip

感謝umopepisdn。我已經在Create上添加了圖像。但是我需要追加到現有的div，其中有更多的圖像。添加了一個屏幕截圖供參考。 – Sunny

我看不到屏幕截圖。你現有的div不是'＃loadIMG'嗎？所以追加應該將url圖像添加到現有圖像中。 –

如果刷新頁面只是把「event.preventDefault（）;」。 http://api.jquery.com/event.preventdefault/

$("button").click(function() { 
      event.preventDefault(); 
      alert($('#url').val()); 
       var imgURL = $('#url').val(); 
       $("#loadIMG").append($("<div class='divImg' <p> <img ALIGN='top' src=" + imgURL + "></img></p>")); 
       //$("#loadIMG").html("<img src='" + imgURL + "' alt='description' />"); 
      });

來源

2015-04-28 15:13:32 Couteau

如何將此新圖像添加到div的現有圖像？ – Sunny

它不適用於append（）？ – Couteau

使用HTML，CSS和Javascript將圖像上傳到圖像集合

回答

相關問題