如何在用户从文件资源管理器中选择图像后立即显示图像？

Question

我目前正在创建一个接受 .png 文件并将其存储在数据库中的表单。有没有一种方法可以在用户从文件资源管理器中选择 .png 后立即在前端显示图像，而无需重新加载页面或提交表单？即，是否可以在选择后立即显示图像而无需任何后端交互？

归结为最简单的组件，我正在寻找图像显示在图像输入上方的 div 中的东西：

<div id="SelectedImage">Selected Image:</div>

<input id="pngFile" type="file" />

提前致谢。

Answer 1

您好，您可以使用jQuery，例如：

function img_pathUrl(input){
        $('#img')[0].src = (window.URL ? URL : webkitURL).createObjectURL(input.files[0]);
    }

#img {
  background: #ddd;
  width:100px;
  height: 90px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="img">
<br>
<input type="file" id="img_file" name="img_file" onChange="img_pathUrl(this);">

根据您的需要进行调整。

如何在用户从文件资源管理器中选择图像后立即显示图像？

How to display an image immediately after user selects it from their file explorer?

html

javascript

jquery

frontend

input