图片上传预览居中（第二篇）
简单的图片上传预览居中
简单的doem,实现图片上传在容器里显示居中
思路：
一、实现上传用到的知识点：
1：<input type='file'/>去访问文件中的的图片
2：使用change事件去监听input value值的改变
二、获取file对象去获取上传的图片信息
1:document.getElementById('imgObj').files[0];
三、使用var reader = new FileReader();
1：使用FileReader去获取异步读取存储在用户计算机上的文件
2：FileReader.readAsDataURL()
开始读取指定的Blob中的内容。
一旦完成，FileReader.onload 处理load事件。
该事件在读取操作完成时（此例子是操作完成readAsDataURL方法）触发在result属性中
将包含一个data: URL格式的字符串以表示所读取文件的内容。
图片如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 使用背景图片居中的方式 */
#showImage {
width: 200px;
height: 200px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- 图片占满容器，且居中 -->
<input type="file" id="imgObj" onchange="getImage()" />
<div id="showImage"></div>
<script>
getImage = function() {
//1:获取file对象
var upImage = document.getElementById('imgObj');
var objImage = upImage.files[0];
var reader = new FileReader();
//2:解析对象，转成baae64对象的url
reader.addEventListener("load", function() {
var imgurl = reader.result;
var showImage = document.getElementById('showImage');
showImage.style = 'background-image:url(' + imgurl + ')';
}, false);
if (objImage) {
//在load中返回一个base64编码
reader.readAsDataURL(objImage);
}
};
</script>
</body>
</html>
还在不断的优化和学习中，如果有不好地方，欢迎指正
