更換並預覽多個圖像上傳

我有這個代碼更換並預覽多個圖像上傳

<?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">'; 
      } 
     } 
    ?>

被動態顯示的圖像，其結果是該

現在我試圖讓用戶上傳多個新圖像，但我希望他們能夠預覽新圖像，而不是動態圖像。

我有此代碼爲多個預覽

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

這使回本

的問題是，我想要的預覽圖像來代替動態圖像來代替他們在上面顯示。

來源

2017-07-12 Brad

定位現有圖像並使用['.replaceWith（）']（http://api.jquery.com/replacewith/）？ –

只是使用..empty（）來擺脫元素中現有的html，然後替換它。 – Difster

@LouysPatriceBessette玩耍，但沒有運氣，你有一個例子嗎？ – Brad

通過replaceWith得到了我想要的結果（）

改變了這種

imagesPreview(this, 'div.gallery');

爲了這

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

而且它現在的作品完美！

來源

2017-07-12 06:22:49 Brad

好！做得好！ ;） –

更換並預覽多個圖像上傳

回答

相關問題