html一键生成预览图,选择图片后显示缩略图（自动生成缩略图）

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

显示选择图片的缩略图

#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;

}

点击或将单个/多个图片拖放到此处

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);

}

}