将图片上传到编辑器

Question

I have this piece of code that reads in an image when a image linked is copied in and enter is hit , i want to change this so that i am able to upload an image instead of copying a link of one, any help would be great. I want to be able to simply add some other src function to call the uploaded file in instead of the pasted link one I hope that i can get some help on this i know it may be simple but I cant think index.html contains

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>

</div>