如何从输入中获取图像的正确位置并使用 javascript 显示它？

Question

如果我们从输入中得到位置的值，它returns类似于-"file:///C:/fakepath/image.jpg"。但是当我将此值设置为图像的 src 时，它说找不到文件。

如何获取正确的图片路径并设置为图片来源？

Html:

   <label for="inputId">file dialog</label>
<input type="file" id="inputId"/>

<button onclick="setImage()">Show Image</button>
<br>
<img id="image"src="" width="600px" height="400px">

JS:

var img = document.getElementById("image");

function setImage() {
var fileName = document.getElementById("inputId").value;
img.src = fileName;
}

Answer 1

您需要读取文件并将其 base64 数据设置为图像的 src:

var img = document.getElementById("image");

function setImage() {
         const files = document.getElementById("inputId").files;
         if (!files || files.length==0)
              return;
         const file = files[0];
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => {
               img.src = reader.result;      
         };
}

<label for="inputId">file dialog</label>
<input type="file" id="inputId"/>

<button onclick="setImage()">Show Image</button>
<br>
<img id="image"src="" width="600px" height="400px">

如何从输入中获取图像的正确位置并使用 javascript 显示它？

How to get the proper location of a image from input and display it using javascript?

javascript

input

src