Загрузить изображение в редактор

Question

У меня есть этот фрагмент кода, который читает изображение, когда ссылка на изображение копируется, и ввод выполняется, я хочу изменить это так, чтобы я мог загрузить изображение вместо того, чтобы скопировать ссылку на одну, любую помощьбыло бы замечательно.Я хочу иметь возможность просто добавить какую-то другую функцию src для вызова загруженного файла вместо вставленной ссылки. Я надеюсь, что смогу получить некоторую помощь по этому вопросу, я знаю, что это может быть просто, но я не могу думать, что index.html содержит

function addImage(e) {
  var imgUrl = $("#imgUrl").val();

  if (imgUrl.length) {

    $("#imageContainer img").attr("src", imgUrl);
  }
  e.preventDefault();
}

$("#urlBox").submit(addImage);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="urlBox" class="center">
  <input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and hit enter to start playing.">
</form>

<!--Controls for CSS filters via range input-->
<div class="sliders">
  <form id="imageEditor">
    <p>
      <label for="gs">Grayscale</label>
      <input id="gs" name="gs" type="range" min=0 max=100 value=0>
    </p>

    <p>
      <label for="blur">Blur</label>
      <input id="blur" name="blur" type="range" min=0 max=10 value=0>
    </p>

    <p>
      <label for="br">Brightness</label>
      <input id="br" name="br" type="range" min=0 max=200 value=100>
    </p>

    <p>
      <label for="ct">Contrast</label>
      <input id="ct" name="ct" type="range" min=0 max=200 value=100>
    </p>

    <p>
      <label for="huer">Hue Rotate</label>
      <input id="huer" name="huer" type="range" min=0 max=360 value=0>
    </p>

    <p>
      <label for="opacity">Opacity</label>
      <input id="opacity" name="opacity" type="range" min=0 max=100 value=100>
    </p>

    <p>
      <label for="invert">Invert</label>
      <input id="invert" name="invert" type="range" min=0 max=100 value=0>
    </p>

    <p>
      <label for="saturate">Saturate</label>
      <input id="saturate" name="saturate" type="range" min=0 max=500 value=100>
    </p>

    <p>
      <label for="sepia">Sepia</label>
      <input id="sepia" name="sepia" type="range" min=0 max=100 value=0>
    </p>

    <input type="reset" form="imageEditor" id="reset" value="Reset" />
  </form>
</div>