将图片上传到编辑器

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>