动态更改div的位置

Question

我的页面上有一个图像上传按钮，以及预览这些图像的区域。我只想改变显示这些图像的方式。目前我喜欢这个 -

我想以这种方式预览 -

一点解释 - 当用户上传图片时，上传的图片应该替换上传按钮div，按钮框将向右移动。当用户上传下一张图像时，将重复相同的过程。上传按钮框将继续向右移动，图像将取代它。

       for (var i=1; i<obj.image.length; i++) {
        var img_div_pre = document.createElement("div");

            img_div_pre.className = "col-md-4 col-lg-4 col-sm-6 clearfix pre_uploaded-img-wrapper";
            img_div_pre.id = "pre_uploaded-img-wrapper" +obj.image[i].image_id;

            img_div_pre.innerHTML = "<a href='"+obj.image[i].url+"' target='_blank'><img class='dl-new-iamges img-responsive' id='"+obj.image[i].image_id+"' src='"+obj.image[i].url+"' /></a>";

            img_div_pre.appendChild(pre_innerDiv);



            pre_uploaded_img_parent.appendChild(img_div_pre);
    }

在这里，我通过Ajax从服务器获取对象（obj）中的img源代码和id。所选图像首先进入服务器并返回响应obj。 感谢。

Answer 1

您的问题涉及两件事。

1. 选择后预览图像。为此使用此代码：

   function preview(){
           var preview  = new FileReader();
           preview.onload = function (e) {
               // code to set height/width etc of preview element.
               // An img element is already present with src="#"
               // let us assume id of this element is "image".
               // preview will just src to this img element.
           };
           var file = document.getELementById("file");
           preview.readAsDataURL(file.files[0]);  }
   

2。 现在，您必须再创建一个元素，您可以在其中显示新的上载文件对话框。

var uploadHtml = document.getElementById("file").innerHtml;
document.getElementById("file").innerHtml = "";
var newDiv = document.createElement("div");
var img = document.getElementById("img");
newDiv.appendChild(uploadHtml);
document.body.insertAdjacentHTML(img, newDiv);

希望它有用。