我目前正在创建一个接收 .png 文件并将其存储在数据库中的表单。有没有办法在用户从文件资源管理器中选择 .png 后立即在前端显示图像，而无需重新加载页面或提交表单？即，是否可以在选择后立即显示图像而无需任何后端交互？
将其归结为最简单的组件，我正在寻找图像显示在图像输入上方的 div 中的东西：
<div id="SelectedImage">Selected Image:</div>
<input id="pngFile" type="file" />
提前致谢。
您好，您可以使用 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);">使其适应您的需求。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句