<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片预览</title>
<style>
#preview {
width: 200px;
height: 200px;
margin-top: 20px;
margin-left: 50%;
transform: translateX(-50%);
text-align: center;
display: flex;
border-radius: 50%;
}
</style>
</head>
<body>
<input type="file" id="doc" accept="image/*" style="display: none;">
<!-- accept="image/*"，表示文件格式限于图片 -->
<img id="preview" src="https://ts1.cn.mm.bing.net/th?id=OIP-C.8O9qrVzb5YiIcMQUAd-tVAAAAA&w=166&h=155&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="头像">
<button οnclick="openFile()"
style="margin-top: 20px; margin-left: 50%;
transform: translateX(-50%);
text-align: center;
display: flex;">选择头像</button>
</body>
</html>
<script>
function openFile() {
doc.click();
}
// 模拟doc的点击事件
// 当用户点击这个按钮时，会触发onclick事件，调用openFile()函数。根据前文提到的JavaScript函数定义，
// 这将模拟点击隐藏的文件输入框，从而打开文件选择对话框让用户选择图片。
// 图片预览
// 当用户选择图片后，会触发change事件，调用addEventListener()函数。根据前文提到的JavaScript函数定义，
// 这将监听文件选择框的变化，当用户选择图片时，会触发change事件，从而调用onchange()函数。
doc.addEventListener('change', function (e) {
// e 是事件对象（Event Object），它包含了关于发生事件的信息。当 change 事件触发时（即文件输入框中的文件发生改变时），
// 浏览器会自动传递一个事件对象 e 给事件处理函数。通过这个对象，我们可以访问到与事件相关的一些方法和属性，
// e.target 用来获取触发事件的DOM元素，在这个例子中用来获取用户选择的文件。
var file = e.target.files[0];
if (file) {
//判断file是否存在，如果存在则执行下面的语句
var reader = new FileReader();
// FileReader是一个用于读取文件的对象。通过创建一个新的FileReader实例，可以使用它来异步读取文件。该对象提供了多个事件处理函数，
// 例如onload和onerror，可以在读取文件成功或失败时执行相应的操作。
// 此外，FileReader还提供了多个方法，如readAsText()、readAsDataURL()等，用于指定要读取的文件类型和方式。
reader.onload = function (e) {
// onload 是一个事件监听器，用于监听阅读器（reader）加载文件完成的事件。当使用 FileReader 对象读取文件时，
// onload 事件会在文件读取操作成功完成时触发。
// 你可以将需要在文件读取完成后执行的代码放入这个事件的回调函数中，以确保操作在数据可用时进行。
// 在这里是选择图片完成后需要执行的操作。
var previewElement = document.getElementById('preview');
previewElement.src = e.target.result;
// e.target.result获取加载完成的文件内容（这里指将选择的图片的编码通过转码后绑定到预览框，实现在页面上展示）。
console.log("这是选择的图片的编码",e.target.result);
previewElement.style.display = "block";
};
reader.readAsDataURL(file);
// FileReader.readAsDataURL() 方法用于将文件读取为 Data URL。Data URL 是一种将小文件（小于 2MB）嵌入到网页中的方法。
// Data URL 的格式是 data:[<media type>][;base64],<data>。其中，<media type> 是文件的媒体类型，<data> 是文件的Base64编码。
// 通过将文件转换为Data URL，可以将文件嵌入到网页中，而不需要通过网络请求。
} else {
document.getElementById('preview').style.display = "none";
}
});
</script>
3491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
