HTML 从文件上传中获取图像答案

【问题标题】：HTML getting an image from a file uploadHTML 从文件上传中获取图像
【发布时间】：2021-10-06 05:15:59
【问题描述】：

我正在处理一个旧项目并尝试修复一些错误。

我有一个 HTML 文件上传

function updateImage() {
  circleArray = [];
  newPic = `id="taco" width="300" height="300"  src="${$(
    "#myFile"
  ).val()}" alt="prime.png"`;
  $("#hide").empty();
  $("#hide").append(`<img ${newPic}>`);
  makeCanvas();
}

<form>
  <input type="file" id="myFile" name="filename">
  <button id='submit'>Submit</button>
</form>

当我单击提交按钮时，我有一个功能应该用新上传的图像更新显示的图像。

文件似乎已上传，但我访问不正确。

我看到以下错误

GET c:\fakepath\IMG_0544.jpg net::ERR_UNKNOWN_URL_SCHEME

【问题讨论】：

如果图像被上传到网站，那么您必须将该图像保存在您可以通过src（托管图像的网址）检索它的位置。当您从 c:\ 获取图像时，您似乎正在本地 PC 上运行项目，并且如果获取完整的 @987654327，则 privacy 和 security 违反（或可能） @ 来自 PC 的图像，因此浏览器只显示假路径而不是真实路径。一种解决方案可以是上传image 的名称并使用直接路径，如下所示：C:\User\Images\**Image name**
这能回答你的问题吗？ Loading an image to a <img> from <input file>

标签： javascript html jquery

【解决方案1】：

考虑以下内容。

$(function() {
  function updateImage() {
    var newPic = $("<img>", {
      id: "taco",
      alt: "prime.png"
    }).css({
      width: 300,
      height: 300
    });
    var myFile = $("#myFile")[0].files[0];
    var reader = new FileReader();
    reader.onload = function(event) {
      newPic.attr("src", event.target.result);
      $("#hide").empty().append(newPic);
    };
    reader.readAsDataURL(myFile);
    //makeCanvas();
  }

  $("form").submit(function(event) {
    event.preventDefault();
    updateImage();
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="file" id="myFile" name="filename">
  <button id='submit'>Submit</button>
</form>
<div id="hide"></div>

这会从input 元素中读取文件并将其呈现为图像。

【讨论】：

【解决方案2】：

我无法在您的动态“代码 sn-p”中重现问题，但很清楚发生了什么。
错误GET c:\fakepath\IMG_0544.jpg net::ERR_UNKNOWN_URL_SCHEME 表示您的浏览器试图访问您的 C:\ 驱动器上的文件，就好像它是一个远程 URL。你不能这样做:)
一种可能的解决方案：尝试上传图像并将其呈现为“嵌入图像”，根据这篇文章：

https://www.thesitewizard.com/html-tutorial/embed-images-with-data-urls.shtml
另一个可能的解决方案：使用FileReader.readAsDataURL()：

https://www.tutorialrepublic.com/faq/how-to-preview-an-image-before-it-is-uploaded-using-jquery.php

【讨论】：

【解决方案3】：

试试这个：

function updateImage() {
      circleArray = [];
      newPic = `id="taco" width="300" height="300"  src="${$("#myFile").get(0).files[0].name}" alt="prime.png"`;
      $("#hide").empty();
      $("#hide").append(`<img ${newPic}>`);
      makeCanvas();
    }

【讨论】：