图片上传之前预览图片

最新推荐文章于 2025-01-28 16:03:20 发布

原创最新推荐文章于 2025-01-28 16:03:20 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML5的FileReader API实现的图片预览功能，通过在前端页面上选择图片文件，即可实时预览所选图片。该功能利用了JavaScript的事件监听和DOM操作，适用于各种现代浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type="file" id="file_head_img" accept="image/gif,image/jpeg,image/jpg,image/png" name="file" onchange="showPreview(this);" style="display:none;">

<script>
function showPreview(source) {
	var file = source.files[0];
	if (window.FileReader) {
		var fr = new FileReader();
		fr.onloadend = function(e) {
			$("#head_img").attr("src", e.target.result);
		};
		fr.readAsDataURL(file);
	}
}
</script>