本文介绍如何利用原生JavaScript实现图片上传后的本地即时预览功能。文章详细解析了通过CSS隐藏原生上传按钮并美化界面的技巧，重点讲解了使用FileReader API读取文件并生成Data URL，以及通过操作DOM元素src属性实现图片替换显示的具体步骤。文中提供了两个完整的HTML、CSS及JS代码示例，分别演示了图片在点击位置及侧边位置的预览效果，适用于前端开发中的常见交互需求。
图片上传与预览功能概述
本文分享了使用JavaScript实现图片上传及本地预览功能的具体代码实现，供读者参考。
实现该功能的基本思路是：首先对原生的文件上传按钮进行样式美化，随后在页面中放置一个<img>标签。当用户选择图片上传后，通过JavaScript获取新图片的源地址，并更新该<img>标签的src属性，从而完成预览图的替换。
原始的文件上传按钮样式通常较为简陋，如下图所示：
上传按钮的美化技巧
对上传按钮进行美化的具体步骤如下：
第一步，将文件输入框（input type="file"）设置为绝对定位，使其覆盖在用户指定的图标、按钮或div元素之上。或者，也可以给目标容器设置绝对定位，核心目的是让透明的文件选择按钮与用户自定义的交互区域完全重合。
第二步，调整文件输入框的尺寸，使其宽度和高度与下方覆盖的图标、按钮或容器大小保持一致。
第三步，将文件输入框的透明度设置为0（opacity: 0），使其在视觉上不可见，但依然可以点击触发文件选择对话框。
经过上述美化处理后，上传按钮的视觉效果如以下示例所示：
图片预览功能的实现步骤
接下来介绍实现图片预览功能的具体步骤：
首先，在HTML中预先定义一个<img>标签，其src属性初始为空或指向一张默认占位图片。
如果初始src为空，建议将该<img>标签设置为透明（opacity: 0）。如果不设置透明，当src为空时浏览器可能会显示破损的图片图标，影响界面美观。
当用户点击上传并选择图片后，通过JavaScript获取所选图片的源地址（src），将其赋值给预先定义好的<img>标签，并将该<img>标签的透明度设置为1（opacity: 1），从而显示预览图片。
以下是具体的代码实现示例。
示例一：点击位置上传预览
示例一：实现图片在点击位置进行上传和预览（此示例中使用了AUI框架，但核心逻辑不依赖该框架）。
HTML结构代码如下：
<div id="imgPreview">
<div id="prompt3">
<span id="imgSpan">
点击上传
<br />
<i class="aui-iconfont aui-icon-plus"></i>
<!--AUI框架中的图标-->
</span>
<input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
<!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
</div>
<img src="#" id="img3" />
</div>CSS样式代码如下：
#imgPreview {
width: 40%;
height: 180px;
margin: 10px auto 0px auto;
border: 1px solid black;
text-align: center;
}
#prompt3 {
width: 100%;
height: 180px;
text-align: center;
position: relative;
}
#imgSpan {
position: absolute;
top: 60px;
left: 40px;
}
.filepath {
width: 100%;
height: 100%;
opacity: 0;
}
#img3 {
height: 100%;
width: 100%;
display: none;
}JavaScript逻辑代码如下：
function changepic() {
$("#prompt3").css("display", "none");
var reads = new FileReader();
f = document.getElementById('file').files[0];
reads.readAsDataURL(f);
reads.onload = function(e) {
document.getElementById('img3').src = this.result;
$("#img3").css("display", "block");
};
}示例一的效果如下图所示：
示例二：侧边位置上传预览
示例二：实现图片在点击按钮旁边的区域进行上传和预览（此示例中使用了阿里巴巴矢量图标库，但核心逻辑不依赖该图标库）。
HTML结构代码如下：
<div class="aui-col-xs-3" id="img">
<svg class="icon bigIcon" aria-hidden="true">
<use xlink:href="#icon-msnui-add"></use>
</svg>
<!--阿里巴巴矢量图标，就是最后效果图中的“+”图标-->
<div class="aui-grid-label">添加图片</div>
<div id="upImg">
<input type="file" name="file" id="chooseImage" />
</div>
<div id="imgPreview">
<img src="#" id="cropedBigImg" />
</div>
</div>CSS样式代码如下：
#img {
float: left;
margin-left: 20px;
width: 150px;
height: 60px;
}
#upImg {
position: absolute;
top: 0px;
left: 0px;
}
#upImg input {
width: 70px;
height: 60px;
opacity: 0;
}
#imgPreview {
width: 80px;
height: 60px;
position: absolute;
left: 70px;
top: 0px;
}
#cropedBigImg{
width: 100%;
height: 100%;
display: none;
}JavaScript逻辑代码如下：
$('#chooseImage').on('change', function() {//当chooseImage的值改变时，执行此函数
var filePath = $(this).val(), //获取到input的value，里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
// 检查是否是图片
if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}else{
$('#cropedBigImg').css('display','block');
$('#cropedBigImg').attr('src', src);
}
});示例二的效果如下图所示：
作者为JavaScript实习生，正在不断学习和进步，欢迎各位前辈批评指正。
如果希望更深入系统地学习JavaScript，推荐阅读《JavaScript忍者秘籍》这本经典书籍。
以上就是本文的全部内容，希望对大家的学习有所帮助，也欢迎大家继续支持本站。