Question

我想读取在<input type="file">标记中选择的图像的URL，然后显示相应的图像，而无需先将文件上传到服务器。

<input type='flie'id='anything' name='anything'>

并在

中输出

<div id='showimg'></div>

无需先上传。

Answer 1

“上传” 表示将图像从客户端传输到服务器。如果您只想显示图像，则完全不同。您想要的是拥有<input type=image>，并执行一个onchange操作，该操作读取图像的路径，然后采用该路径并将其放入img标记的src部分。

类似这样的东西：（不保证可以正常工作。请查看详细信息...）

<html>
<head>
<script>
function updateimgref(){
  var img = document.getElementById("outputimg");
  var input = document.getElementById("imginput");
  if (input.files && input.files[0]) {
    img.href = input.result;
  }

}
</script>
</head>
<body>
<input type="image" id="imginput" onchange="updateimgref()">
<img id="outputimg" href="myblankplaceholder.png">
</body>
</html>

se也 HTML input type=file, get the image before submitting the form

如何在不上传图像的情况下访问图像并在IMG标签中显示

1 个答案: