使用 HTML、CSS 和 Javascript 将图像上传到图片库

Question

我有一个div，我在其中加载所有图像，我正在使用以下代码从文件夹中加载所有图像。 我还有一个文本框，我可以在其中输入任何图像 URL（例如：http://images.mentalfloss.com/sites/default/files/styles/article_640x430/public/happy-first-birthday.png）和下面的按钮，当我单击该新图像时，新图像应显示在具有其他图像的现有div 的顶部。

我尝试使用注释的代码，但没有运气。我认为页面正在刷新并且图像正在消失。

j查询：

<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>

问题：如果我放置一些带有图像的谷歌URL，则在输入文本和按钮单击中应显示下面的图像以及其他图像。我怎样才能做到这一点？我尝试使用注释的代码附加到div，但图像没有显示。[屏幕参考]

Answer 1

您需要阻止提交表单的默认操作：

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

Answer 2

如果页面刷新只需输入" 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' />");
           });