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

Question

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

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

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>

问题：如果我把一些带有图片的谷歌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' />");
           });