动态更改div的位置

Question

I have a image upload button on my page and the area to preview those images. I just want to change the way of displaying those images. Currently I have like this -

Where as I want to preview in this way -

Bit of explanation - When user uploads an image, uploaded image should replace the upload button div and button box will shift to right. When user uploads next image, same process would be repeated. Upload button box will keep on shifting to right the image will take its place.

       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);
    }

Here, I am getting img source and id in an object(obj) from the server through Ajax. Selected image first going to server and in response obj is returned. Thanks.

Answer 1

There are two things involved in your problem.

1. Previewing image once it is selected. For this use this code:

    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. Now you have to create one more Element where you can show new upload file dialog.

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

Hope it was helpful.