在前端开发中，图片文件上传是一项常见的功能。本文将介绍如何使用JavaScript实现一个针对img类型的文件上传示例。
准备工作
在开始编写代码之前，我们需要先准备一个HTML页面，其中包含一个用于展示上传图片的<img>标签和一个用于选择文件的文件输入框。
<!DOCTYPE html>
<html>
<head>
<title>图片文件上传示例</title>
<style>
#preview {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>图片文件上传示例</h1>
<input type="file" id="fileInput" />
<img id="preview" src="#" alt="预览图" />
<script src="script.js"></script>
</body>
</html>
JavaScript代码实现
下面是针对img类型的文件上传的JavaScript代码示例：
// 获取文件输入框
var fileInput = document.getElementById("fileInput");
// 监听文件选择事件
fileInput.addEventListener("change", function (event) {
var file = event.target.files[0];
// 检查文件类型
if (!file.type.match("image.*")) {
alert("请选择图片文件");
return;
}
// 创建文件读取器
var reader = new FileReader();
// 读取文件完成后的回调函数，将结果显示在预览图中
reader.onload = function (event) {
var image = document.getElementById("preview");
image.src = event.target.result;
};
// 读取文件
reader.readAsDataURL(file);
});
以上代码通过监听文件选择事件，在选择文件后进行类型检查，如果不是图片文件则弹出提示框。接着创建一个FileReader对象，将文件读取为Data URL格式，最后将结果显示在预览图中。
运行效果
在浏览器中打开HTML页面，选择一张图片文件，即可在预览图中看到选择的图片。
总结
通过使用JavaScript，我们能够方便地实现图片文件的上传功能。这为我们在开发Web应用或移动应用时提供了便利。
以上是一个简单的针对img类型的文件上传示例，你可以根据实际需求进行修改和扩展。希望本文对你有所帮助！
本文来自极简博客，作者：幽灵船长，转载请注明原文链接：JS实现图片文件上传示例
