本文详解如何利用原生JavaScript实现前端图片上传功能。通过input标签获取文件，使用FileReader对象的readAsDataURL方法将图片转换为Base64格式，并结合onchange事件实现实时预览。同时包含文件类型校验逻辑，确保上传的是有效图片，最后通过Ajax将数据发送至后端。
图片上传原理与流程概述
前端实现图片上传的核心逻辑在于：首先利用<input type="file">标签获取用户选择的图片文件，随后实例化FileReader对象，调用其readAsDataURL()方法读取文件内容并将其转换为Base64编码格式。处理完成后，通过Ajax等异步请求方式将转换后的数据发送至服务器后台。
HTML结构搭建
HTML结构部分
在HTML中，必须包含一个<input type="file">标签用于文件选择。若需在前端展示图片预览效果，还需额外添加一个<img>标签来显示读取后的结果。
<div class="warp">
<div class="warp-content">点击上传</div>
<input type="file" id="file" />
</div>
<img src="" />JavaScript核心逻辑实现
JavaScript逻辑部分
首先，图片上传功能依赖于检测文件是否发生变化，因此选用JavaScript的onchange事件。代码中需先获取input和img元素的DOM节点。在<input type="file">元素下存在files属性，该属性包含上传文件的详细信息，打印输出可查看文件名、类型等元数据。
var file = document.getElementById('file');
var image = document.querySelector("img");
file.onchange = function() {
var fileData = this.files[0];//这是我们上传的文件
}
其次，利用FileReader对象读取文件内容。FileReader主要用于将本地文件内容读入内存，通过一系列异步接口允许在主线程中访问本地文件。Web应用程序可使用FileReader对象异步读取存储在用户计算机上的文件或原始数据缓冲，指定处理的文件可通过File对象或Blob对象传入。此处关键使用readAsDataURL方法，该方法能将文件以Base64格式读取出来。
FileReader API使用方法
具体使用方法
var reader = new FileReader();
reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
/*当读取操作成功完成时调用*/
reader.onload = function(e) {
console.log(e); //查看对象属性里面有个result属性，属性值，是一大串的base64格式的东西，这个就是我们要的图片
console.log(this.result);//取得数据 这里的this指向FileReader（）对象的实例reader
image.setAttribute("src", this.result)//赋值给img标签让它显示出来
}FileReader对象的属性与事件机制
参考FileReader对象官方文档以获取更详细的API说明。
文件类型校验与后台传输
完成上述步骤后，即可实现完整的图片上传功能。由于无法保证用户上传的文件类型（可能是图片、视频或其他格式），必须进行文件类型校验。在<input type="file">元素的files属性中包含了文件类型信息，可通过该属性判断上传文件是否为图片。在reader.onload回调中，通过this.result获取图片的Base64格式数据，将其赋值给变量并发送至后台，从而完成图片上传流程。
var file = document.getElementById('file');
var image = document.querySelector("img");
file.onchange = function() {
var fileData = this.files[0];//获取到一个FileList对象中的第一个文件(File 对象),是我们上传的文件
var pettern = /^image/;
console.info(fileData.type)
if (!pettern.test(fileData.type)) {
alert("图片格式不正确");
return;
}
var reader = new FileReader();
reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
/*当读取操作成功完成时调用*/
reader.onload = function(e) {
console.log(e); //查看对象
console.log(this.result);//要的数据
image.setAttribute("src", this.result)
}
}完整代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.warp {
display: inline-block;
vertical-align: bottom;
position: relative;
}
.warp-content {
border: 1px solid red;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
}
input {
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
width: 150px;
height: 150px;
opacity: 0;
cursor: pointer;
}
img {
width: 300px;
height: 300px;
border: 1px solid red;
margin-top: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="fileBox">
<div class="warp">
<div class="warp-content">点击上传</div>
<input type="file" id="file" />
</div>
<img src="" />
</div>
<script type="text/javascript">
var file = document.getElementById('file');
var image = document.querySelector("img");
file.onchange = function() {
var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
var pettern = /^image/;
console.info(fileData.type)
if (!pettern.test(fileData.type)) {
alert("图片格式不正确");
return;
}
var reader = new FileReader();
reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
/*当读取操作成功完成时调用*/
reader.onload = function(e) {
console.log(e); //查看对象
console.log(this.result);//要的数据 这里的this指向FileReader（）对象的实例reader
image.setAttribute("src", this.result)
}
}
</script>
</body>
</html>以上内容为本文的全部讲解，希望对读者的学习有所帮助，欢迎继续支持本站获取更多技术资源。