选择图片后显示缩略图（自动生成缩略图）

59 阅读 0 评论 39 点赞

我是靠谱客的博主自信往事，最近开发中收集的这篇文章主要介绍选择图片后显示缩略图（自动生成缩略图），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

参考：使用drop实现点击和拖放选择/上传文件

下面是完整代码，看注释：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示选择图片的缩略图</title>
<style>
#dropbox {
width: 400px;
height: 70px;
line-height: 70px;
text-align: center;
border: 2px dashed #999;
border-radius: 5px;
background: #fbfbfb;
color: #666;
}
#preview>img {
height: 80px;
margin: 7px;
border: 1px solid #666;
border-radius: 4px;
box-shadow: 3px 3px 3px #bbb;
}
#outbox{
display: inline-block;
position: relative;
overflow: hidden;
}
#imgUpload{
position: absolute;
left: 0px;
font-size: 60px;
opacity: 0;
}
</style>
</head>
<body>
<div id="outbox">
<div id="dropbox">
<input id="imgUpload" type="file" multiple>
<span>点击或将单个/多个图片拖放到此处</span>
</div>
</div>
<div id="preview"></div>
<script>
var dropbox, imgUpload;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("dragleave", dragleave, false);
dropbox.addEventListener("drop", drop, false);
imgUpload = document.getElementById("imgUpload");
imgUpload.addEventListener("change", readFile, false)
// 目标进入drop区域
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
dropbox.style.background = '#666'
}
// 目标位于drop区域上方
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
// 目标离开drop区域
function dragleave(e) {
e.stopPropagation();
e.preventDefault();
dropbox.style.background = '#fbfbfb';
}
// 目标在drop区域被释放/放置（松开鼠标）
function drop(e) {
e.stopPropagation();
e.preventDefault();
dropbox.style.background = '#fbfbfb';
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
// 点击上传文件后的方法
function readFile() {
handleFiles(this.files);
}
// 显示缩略图的方法
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image//;
// 自动过滤非图片文件
if (!imageType.test(file.type)) {
continue;
}
// 创建img对象并加入到页面中
var img = document.createElement("img");
preview.appendChild(img);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
})(img);
}
}
</script>
</body>
</html>