使用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将图像上传到图像集合

回答

相关问题