Image upload preview effect
js + files target to achieve a simple image upload preview
Step by step to optimize, from a simple beginning, come on!
- Use to access files in the picture, and use the change event to listen for file uploads
- Gets file objects
- Analysis target, turn into object base64 url
image: 
code show as below:
<!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>
</head>
<body>
<input type="file" id="imgObj" onchange="getImage()"/>
<img src="" id="imgId"/>
<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 imgId = document.getElementById('imgId');
imgId.src=imgurl;
}, false);
if (objImage) {
//在load中返回一个base64编码
reader.readAsDataURL(objImage);
}
};
</script>
</body>
</html>
