First file type preview image displaying on the second file type

user_6928258 0
Viewed 76

I am displaying the file type dynamically by clicking on the button. I am sharing only HTML view source code here. For example, I have two file types.

I am using the below code. My issue is When I upload the image in the first file type and preview than the same image displaying on second the file type. I need the first image should be displayed in the first file type and the second image should be displayed in the second file type.

May I know what is the issue with my code?

function workimage_preview(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('.show-uploaded-img').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$(".work_pic").change(function() {
  workimage_preview(this);
});
<div class="insert-img d-table">
  <img src="https://www.eastmanhandtools.com/new/upload/final_pro/big_img/placeholder-image.png" alt="user-img" class="show-uploaded-img">
  <div class="d-table-cell">
    <input type="file" class="work_pic" name="work_pic[]">
    <label for="work_pic" class="text-underline">Upload</label>
  </div>
</div>

<div class="insert-img d-table">
  <img src="https://www.eastmanhandtools.com/new/upload/final_pro/big_img/placeholder-image.png" alt="user-img" class="show-uploaded-img">
  <div class="d-table-cell">
    <input type="file" class="work_pic" name="work_pic[]">
    <label for="work_pic" class="text-underline">Upload</label>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

css html jquery javascript
1 Answers

The issue is because you're selecting and updating the src of all the .show-uploaded-img elements in the DOM.

To fix this you need to traverse the DOM to find the one related to the input which raised the change event:

function workimage_preview(input) {
  if (input.files && input.files[0]) {
    var $input = $(input);
    var reader = new FileReader();
    reader.onload = function(e) {
      $input.closest('.insert-img').find('.show-uploaded-img').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$(".work_pic").change(function() {
  workimage_preview(this);
});
<div class="insert-img d-table">
  <img src="https://www.eastmanhandtools.com/new/upload/final_pro/big_img/placeholder-image.png" alt="user-img" class="show-uploaded-img">
  <div class="d-table-cell">
    <input type="file" class="work_pic" name="work_pic[]">
    <label for="work_pic" class="text-underline">Upload</label>
  </div>
</div>

<div class="insert-img d-table">
  <img src="https://www.eastmanhandtools.com/new/upload/final_pro/big_img/placeholder-image.png" alt="user-img" class="show-uploaded-img">
  <div class="d-table-cell">
    <input type="file" class="work_pic" name="work_pic[]">
    <label for="work_pic" class="text-underline">Upload</label>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

user_5194130
Related