HTML5新增API FileReader 显示缩略图
<!DOCTYPE html>
<html>
<head>
<title>FileReader 显示缩略图示例</title>
<script>
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
};
if (file) {
reader.readAsDataURL(file);
}
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()">
<img src="placeholder.png" alt="Image preview..." style="width:100px; height:100px;">
</body>
</html>这段代码演示了如何使用HTML5的FileReader API来读取用户选择的图片文件，并在网页上显示该图片的缩略图。当用户选择文件后，会触发input元素的onchange事件，然后调用previewFile函数。这个函数创建一个FileReader对象，当文件读取完毕后，会将图片的DataURL设置为img元素的src属性，从而显示图片的缩略图。
评论已关闭