html上传控件预览图片效果,html原生上传控件进行图片上传显示缩略图

#preview {

display: inline-block;

width: 2.56rem;

height: 2.56rem;

position: relative;

background: #ccc;

background-repeat: no-repeat;

background-size: cover;

}

#file {

width: 100%;

height: 100%;

opacity: 0;

position: absolute;

left: 0;

top: 0;

cursor: pointer;

z-index: 5;

}

var preview = document.querySelector('#preview');

var eleFile = document.querySelector('#file');

eleFile.addEventListener('change', function() {

var file = this.files[0];

// 确认选择的文件是图片

if(file.type.indexOf("image") == 0) {

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e) {

// 图片base64化

var newUrl = this.result;

preview.style.backgroundImage = 'url(' + newUrl + ')';

};

}

});