CODEWITHSUNDEEP
javascriptphpjqueryimagefile-upload
Brad
Brad

Reputation: 99

Replace and preview multiple image upload

I have images being dynamically shown with this code

    <?php
        $query = "SELECT post_gallery_img FROM posts WHERE post_id = $get_post_id";
        $select_gallery_imgs = mysqli_query($connection, $query);

        while($row = mysqli_fetch_assoc($select_gallery_imgs)) {
            $post_gallery_img = $row['post_gallery_img'];

            $post_gallery_img = explode(',', $row['post_gallery_img']);

            foreach($post_gallery_img as $out) {
                echo '<img class="imgFile" id="editPostGalleryImgs" src="../userImages/' . $out . '" alt="Post Image">';
            }
        }
    ?>

And the result is this

3 dynamic images

Now I am trying to let the user upload multiple new images but I want them to be able to preview the new images in place of the dynamic ones.

I have this code for the multiple preview

<input id="galleryImgs" type="file" multiple="multiple" name="files[]"><button style="display: none;" onclick="reset2($('#galleryImgs'));event.preventDefault()"></button>
<div class="gallery"></div>

<script>
 $(function() {
  // Multiple images preview in browser
  var imagesPreview = function(input, editPostGalleryImgs) {

    if (input.files) {
        var filesAmount = input.files.length;

        for (i = 0; i < filesAmount; i++) {
            var reader = new FileReader();

            reader.onload = function(event) {
                $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(editPostGalleryImgs);
            }

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

  };

  $('#galleryImgs').on('change', function() {
      imagesPreview(this, 'div.gallery');
  });

});
</script>

Which brings back this dynamic images

The problems is, I want the preview images to replace the dynamic images instead of them being displayed on top.

Upvotes: 1

Views: 534

Answers (1)

Brad
Brad

Reputation: 99

Got my desired result by using replaceWith()

Changed This 

imagesPreview(this, 'div.gallery');

To This

$(".imgFile").replaceWith(imagesPreview(this, 'div.gallery'));

And it works perfect now!

Upvotes: 1

Related Questions