jquery添加多个div容器

Question

I have a form for posting content onto a wall. We can post pictures on there and text. I have the form content show up in a contenteditable div so the post box displays the image people want to upload and they can type in the div also. I noticed though when people upload an image. It gets prepended like it is supposed to into the div and when they start typing it adds the container for photo around the text also. How can I stop this from happening?

Here is my form code

<form id="post-form" action="Scripts/create-post.php" method="post" onsubmit="return setEditable();">
    <input type="hidden" id="posted" name="posted" value=""/>
    <div id="post-message" name="post-message" contentEditable="true"></div>
    <input id="upload-pic" name="upload-pic" type="file"/>
    <button class="post-buttons" onclick="chooseFile(); return false;">Add Photo</button>
    <button class="post-buttons">Add Link</button>
    <input type="submit" value="Post" />
    <div class="cleared"></div>
</form>

Here is the jquery that adds the uploaded photo into the contenteditable div

function chooseFile() {
    $("#upload-pic").click();
}

$(document).on('change', "#upload-pic", function(){
    readURL(this);
});

function readURL(input){
    if(input.files && input.files[0]){
        var reader = new FileReader();
        reader.onload = function(e){
        $('#post-message').prepend("<div id='post-image-container'><img id='preview'/></div>");
            $('#preview').attr('src', e.target.result); 
        }

        reader.readAsDataURL(input.files[0]);
    }
}

as you can see when the file is uploaded it triggers a click to add the image into the div and the img is surrounded in a div id post image container. This is what is being added to the text once the img is added to the div.

I know this because of an alert it shows me the value of the div as

<div id="post-image-container"><img src='whatever the path is'></div><div id="post-image-container">hello world(if this is what the user typed in)</div>

So I managed to find out if the text is in the contenteditable div already or before it, it does not add the extra div tags around the text. It is only after the image is inserted and you hit enter to type again I think it believes there is a change to the image on the enter hit and then ever consecutive key stroke after that.

Answer 1

Check if #post-image-container already exists and simply update it. If it doesn't then prepend it.

 function readURL(input){
        if(input.files && input.files[0]){
            var reader = new FileReader();
            reader.onload = function(e){


                if($('#post-image-container').length){

                    $('#preview').attr('src', e.target.result); 

                }else{

                    $('#post-message').prepend("<div id='post-image-container'><img id='preview'/></div>");
                        $('#preview').attr('src', e.target.result); 
                    }

                 }

            reader.readAsDataURL(input.files[0]);
        }
    }