本文详解如何利用 JavaScript 的 FileReader API 在前端实现图片上传与实时预览功能。通过监听 input file 的 change 事件，读取 FileList 对象中的文件，并使用 readAsDataURL 将图片转换为 Base64 编码显示在页面上，无需后端交互即可完成本地预览。
FileReader API 概述
FileReader 是前端处理文件时不可或缺的核心 API，尤其在图片处理场景中，深入理解其工作原理是掌握前端文件操作的关键。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.file-ipt{position: absolute;left:0;top: 0;opacity: 0;width: 50px;height: 25px;} //这里透明化了input框，然后绝对定位在按钮上了
.btn{width: 50px;height: 25px; background-color: skyblue;color: white;margin-right: 80px;border: none;border-radius: 10px;font-size: 8px;}
</style>
</head>
<body>
<button class="btn">图片</button>
<input type="file" id="file" accept="image/jpg,imgae/jpeg,image/png" class="file-ipt" onchange="insertimg(this);"><br>
<img src="" id="img1" alt="">
<script language="javascript">
function insertimg(img){
var rd=new FileReader();
files=img.files[0];
var filetype=files.type.slice(6,10);
if(filetype!='jpg'&&filetype!='jpeg'&&filetype!='png'){
alert('仅支持png,jpeg,jpg图片格式');
return;
}else{
rd.readAsDataURL(files);
rd.onloadend=function(e){
document.getElementById('img1').src=e.target.result;
document.getElementById('img1').style.width="300px";
document.getElementById('img1').style.height="auto";
};
}
}
</script>
</body>
</html>input file 与 FileList 对象解析
补充知识点：基于 JS input file 组件的图片上传与预览效果实现。
首先，建议熟悉 file 和 FileReader 的相关 API。当用户选择一个或多个文件后，系统会生成代表所选文件的 File 对象，这些对象被封装在 FileList 对象中。所有 type 属性为 file 的 <input> 元素均具备 files 属性，用于存储用户选择的文件列表。该列表包含 length 属性和 item 方法，开发者可通过 files[index] 或 files.item(index) 获取具体的 File 对象。此外，可以通过监听 input 的 change 事件来捕获文件选择完成的状态。
HTML 结构代码如下：
HTML 与 JavaScript 代码实现
<ul class="crgoods_uploadUl clearfix">
<li><img src="img/product1.jpg"></li>
<li><img src="img/product1.jpg"></li>
<li class="add"><i>+</i>最多20张<input type="file" class="liAdd_flie" οnchange="liUploadImg(this)"></li>
</ul>JavaScript 逻辑代码如下：
//商品相册图片上传预览
function liUploadImg(file){
if (file.files && file.files[0]){
var reader = new FileReader();
reader.onload = function(evt){
// imgUpload.src = evt.target.result;
$('.crgoods_uploadUl li.add').before('<li><img src="'+evt.target.result+'"></li>');
}
reader.readAsDataURL(file.files[0]);
}else{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
imgUpload.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
}
}参考资料与总结
此外，可查阅详细API文档：https://segmentfault.com/a/1190000006600936
具体实现示例如下：
至此，关于 JavaScript 中利用 input 组件进行图片上传及 FileReader 预览图片的介绍已完成。如需了解更多关于 JavaScript 文件上传及预览的相关内容，欢迎查阅本站历史文章或继续浏览后续教程，感谢大家的支持！