Динамически изменить изображение, загрузив его с предварительным просмотром

Question

что я хочу - это (редактор wysiwyg только для изображения) когда пользователь нажимает на любое изображение моей html-страницы, тогда должна появиться опция кнопки «выбрать файл», без написания каких-либо тегов, и я неЯ не хочу загружать это изображение на сервер, поэтому нет необходимости использовать php или любой другой, просто хотите его предварительно просмотреть.что я сделал, чтобы достичь этого

//image that already there in html page
<div id="headshot" class="quickFade">
  <img id="blah" src="#" alt="your image" />
</div>
//grab the id of parent element of clicked image
$('img').click(function(event){
  if (event.target.nodeName == 'IMG'){
    var pratik = event.target.parentNode.id; 

// creates <input type="file" id="imgInp">  

var newElem = document.createElement('input');
    newElem.type = "file";      
    newElem.id = "imgInp";

    document.getElementById(pratik).appendChild(newElem);
  }
})

// preview the image after uploading the image and then remove the "choose file" button 
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

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

$('#imgInp').change(function() {

document.getElementById("imgInp").remove();
  readURL(this);
});

, весь этот код динамически генерирует <input type="file" id="imgInp"> ниже <img id="blah" src="#" alt="your image" />, так что это понравится:

<div id="headshot" class="quickFade">
  <img id="blah" src="#" alt="your image" />
<input type="file" id="imgInp">
</div>

процесс загрузки работает поиск, но предварительный просмотр иудаление кнопки после предварительного просмотра не работает

, но когда я вручную помещаю этот код <input type="file" id="imgInp"> путем редактирования html-файла, то удаляю кнопку после того, как рабочие функции предварительного просмотра работают.заражать функциональность не зависит от этого кода <input type="file" id="imgInp"> позиция, которую я имею в виду, я могу поместить в любое место, где захочу, и все еще получать предварительный просмотр и удаление функций работают, но когда этот код <input type="file" id="imgInp"> является кодом, динамически появляющимся через вышеупомянутый JavaScript, тогда возникает эта проблема

Answer 1

let $img = null;

const $fileInput = $('<input>', {
  appendTo: 'body',
  accept: 'image/*',
  type: 'file',
  hidden: true,
  on: {
    change: function(ev) {
      const F = ev.target.files;
      if (!F || !F[0]) return;
      if (!(/^image\/(jpe?g|png|gif)$/).test(F[0].type)) return alert('Use images only');
      $img.one('load', ev => URL.revokeObjectURL(ev.target.src)).prop('src', URL.createObjectURL(F[0]))
    }
  }
});

$('img').on('click', function() {
  $img = $(this);
  $fileInput.click();
});

<div>
  <img src="//placehold.it/100x100/0bf"> Click to replace
</div>
<div>
  <img src="//placehold.it/100x50/f0b"> Click to replace
</div>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>

Answer 2

Причина, по которой он не работает, заключается в том, что элемент создается динамически, поэтому вам нужно будет использовать делегирование событий для обнаружения изменений в DOM.Для этого вы можете использовать метод JQuery on() и назначить делегата в качестве статического родителя.Попробуйте это.

//grab the id of parent element of clicked image
$('img').click(function(event) {
  if (event.target.nodeName == 'IMG') {
    var pratik = event.target.parentNode.id;

    // creates <input type="file" id="imgInp">  

    var newElem = document.createElement('input');
    newElem.type = "file";
    newElem.id = "imgInp";

    document.getElementById(pratik).appendChild(newElem);
  }
})

// preview the image after uploading the image and then remove the "choose file" button 
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

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

// this is all you need to change
$('#headshot').on('change', '#imgInp', function() {
  document.getElementById("imgInp").remove();
  readURL(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="headshot" class="quickFade">
  <img id="blah" src="https://www.gstatic.com/webp/gallery/1.jpg" alt="your image" />