Question

我有一张表格可以将内容发布到墙上。我们可以在那里张贴图片和文字。我有一个表单内容显示在一个contenteditable div中，所以邮箱显示人们想要上传的图像，他们也可以输入div。当人们上传图片时我注意到了。它会像它应该被放入div中一样，当它们开始输入时，它也会在文本周围添加照片容器。我怎样才能阻止这种情况发生？

这是我的表单代码

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

以下是将上传的照片添加到contenteditable div中的jquery

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

正如您所看到的，当您上传文件时，它会触发单击以将图像添加到div中，并且img被div id post image容器包围。这是将img添加到div后添加到文本中的内容。

我知道这是因为它会向我显示div的值

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

所以我设法找出文本是否已经在contenteditable div中或之前，它不会在文本周围添加额外的div标签。只有在插入图像并且再次按回到键入后，我认为它认为输入命中时图像有变化，然后是连续键击。

Answer 1

检查#post-image-container是否已存在，只需更新即可。如果它没有那么前置它。

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

jquery添加多个div容器

1 个答案: