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

Question

如果我们从输入中获取位置的值，它将返回类似-“ 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">