Я работаю над старым проектом и пытаюсь исправить несколько ошибок.

У меня есть файл для загрузки в 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

1
tdammon 5 Окт 2021 в 23:06

3 ответа

Лучший ответ

Учтите следующее.

$(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 и отображает его как изображение.

1
Twisty 5 Окт 2021 в 21:15
  1. Я не могу воспроизвести проблему в вашем динамическом «фрагменте кода», но довольно ясно, что происходит.

  2. Ошибка GET c:\fakepath\IMG_0544.jpg net::ERR_UNKNOWN_URL_SCHEME означает, что ваш браузер пытался получить доступ к файлу на вашем диске C: \, как если бы это был удаленный URL. Вы не можете этого сделать :)

  3. ОДНО ВОЗМОЖНОЕ РЕШЕНИЕ: попробуйте загрузить изображение и отобразить его как «встроенное изображение», согласно этой статье:

    https://www.thesitewizard.com/html- tutorial / embed-images-with-data-urls.shtml.

  4. ДРУГОЕ ВОЗМОЖНОЕ РЕШЕНИЕ: используйте FileReader.readAsDataURL () :

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

1
paulsm4 5 Окт 2021 в 20:49

Попробуй это :

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();
    }
0
Bruno Ribeiro 5 Окт 2021 в 21:04