HTML/Javascript 上传后如何在 web 应用程序上显示图像？

Question

currently have this in my html where the input type = text and I bring in an image via the url but i want to be able to change this to file or image and upload an image and display that image on a web application currently my function doesnt支持这个有谁知道我怎么能做到这一点？ （我对 javascript btw 相当陌生） obvs：我不想在后端存储任何东西我只想上传图像并在我的 web 应用程序上预览

HTML

<body>
    <div id="backdrop"></div>
    <div class="modal" id="add-modal">
      <div class="modal__content">
        <label for="title">Tooling ID</label>
        <input type="text" name="title" id="title" />
        <label for="image-upload">Image Upload</label>
        <input type="text"  id="image-upload" name="image-upload"/>
        <label for="severity">Severity Rating</label>
        <input
          type="number"
          step="1"
          max="10"
          min="1"
          name="severity"
          id="severity"
        />
      </div>

**Javascript**
const renderNewIssueElement = (id, title, imageUpload, severity) => {
  const newIssueElement = document.createElement('li');
  newIssueElement.className = 'issue-element';
  newIssueElement.innerHTML = `
    <div class="issue-element__image">
      <img src="${imageUpload}" alt="${title}">
    </div>
    <div class="issue-element__info">
      <h2>${title}</h2>
      <p>${severity}/10 severity</p>
    </div>
  `;
  newIssueElement.addEventListener(
    'click',
    startDeleteIssueHandler.bind(null, id)
  );
  const listRoot = document.getElementById('issue-list');
  listRoot.append(newIssueElement);
};

这是带有 url 图像附件的应用程序当前的样子

Answer 1

这可以通过XMLHttpRequest使用本机 JavaScript 来完成，或者

与ajax 一起使用 Jquery

HTML/Javascript 上传后如何在 web 应用程序上显示图像？

问题描述

1 个解决方案

解决方案1
0 2020-04-08 13:13:21

HTML/Javascript 上传后如何在 web 应用程序上显示图像？

问题描述

1 个解决方案

解决方案1 0 2020-04-08 13:13:21

解决方案1
0 2020-04-08 13:13:21