window.URL.createObjectURL 加载上传图片源失败，返回blob url答案

【问题标题】：window.URL.createObjectURL fails to load the source of uploaded image and returns blob urlwindow.URL.createObjectURL 加载上传图片源失败，返回blob url
【发布时间】：2013-11-12 12:09:29
【问题描述】：

我上传了一张图片，并在jquery 中存储了该图片源，使用

window.URL.createObjectURL()

方法，但加载后返回 blob URL 并无法保存源。

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

【问题讨论】：

您是否遇到任何安全错误？
呸，“我在 jquery 中存储了”

标签： jquery image-upload

【解决方案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>

查看Fiddle

【讨论】：

上传图像后，我收到一个警报，为 blob:54d483c9-e9bd-4160-af12-3263d817990d。我需要获取图像 url 而不是这个 blob url。如果我给了检查元素它的显示img src 未能加载给定的 url
blob url 是保存在您通过window.URL.createObjectURL 调用的特定浏览器中的文件的位置。它不能在其他浏览器中使用！您到底遇到了哪个错误？
在警告框中，我将 blob url 作为图像 src。现在我需要对我们上传的图像进行裁剪，并需要在另一个页面的 div 中显示裁剪后的图像。
让我们continue this discussion in chat

【解决方案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>

【讨论】：