//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" value="上传图片" id="btn">
<input type="submit" value="提交">
<img src=""/>

<script>
    var btn=document.getElementById('btn');
    btn.onchange=function () {
        /*1.创建文件读取对象*/
        var reader=new FileReader();
        /*2.读取文件，获取DataURL
       * 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
       * 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
       * 2.3:文件存储在file表单元素的files属性中，它是一个数组*/
        var file=this.files;
        reader.readAsDataURL(file[0]);
        /*获取数据*/
        /*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
        * onabort:读取文件中断片时触发
        * onerror:读取错误时触发
        * onload:文件读取成功完成时触发
        * onloadend:读取完成时触发，无论成功还是失败
        * onloadstart:开始读取时触发
        * onprogress:读取文件过程中持续触发*/
        reader.onload=function () {
            console.log(reader.result);
            /*展示*/
            document.getElementsByTagName('img')[0].src=reader.result
        }
    }

</script>
</body>
</html>