Javascript实现图片预览功能

每日鸡汤： 幸福，其实很简单。当你生病了，有人来照顾你，这就是幸福；当你觉得冷了，有人抱着你给过温暖，这就是幸福；当你受委屈流泪了，有人悉心照料的安慰你，这就是幸福；当你老了做不了事了，有人陪伴你看日出日落，这就是幸福。

    <img id="userHeaderImg" src="images/weChat.png" alt="" >
    <input type="file" id="user-Uploadimg" onchange="xmTanUploadImg(this)" accept="image/*">

    <script type="text/javascript">            
        if (typeof FileReader == 'undefined') {
            document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
            document.getElementById("user-Uploadimg").setAttribute("disabled", "disabled");
        }
        //选择图片，马上预览
        function xmTanUploadImg(obj) {
            var file = obj.files[0];               
            console.log(obj);console.log(file);
            console.log("file.size = " + file.size);
            var reader = new FileReader();
            // reader.onloadstart = function (e) {
            //     console.log("开始读取....");
            // }
            // reader.onprogress = function (e) {
            //     console.log("正在读取中....");
            // }
            // reader.onabort = function (e) {
            //     console.log("中断读取....");
            // }
            // reader.onerror = function (e) {
            //     console.log("读取异常....");
            // }
            reader.onload = function (e) {
                console.log("成功读取路径....");
            var img = document.getElementById("userHeaderImg");
                img.src = e.target.result;
                //或者 img.src = this.result;  //e.target == this
            }
                reader.readAsDataURL(file)
        }
    </script>