jquery - window.URL.createObjectURL fails to load the source of uploaded image and returns blob url

Question

I have uploaded an image and in jquery, I have stored that image source using

window.URL.createObjectURL() 

method but after loading it returns blob URL and fails to save the source.

 var img = document.createElement("img");
 img.src = window.URL.createObjectURL(files[0]);

Answer 1

<input type="file" accept="image/*" id="image" />
<img id="img" />

<script>
    var url = window.URL.createObjectURL(e.target.files[0]);
    alert(url);
    document.getElementById("img").src = url;
</script>

检查这个小提琴

Answer 2

试试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  var loadImg=function(event){
      $('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
  };
</script>

<form>
  <input type="file" accept="image/" onchange="loadImg(event)">
  <br/>
  <img id="frame"  width="100px" height="100px"/>
</form>