上传图像在线预览

上传图像在线预览

　　问题：很多网站中目前都存在上传图像、更新个人图像的功能。人性化在线预览功能更有助于客户体验。

在页面中插入以下JS代码即可。

<script type="text/javascript">
    var input  = document.getElementById("inputImage");   // 获取上传图片input(file)
    input.onchange = function(){
        var file = this.files[0];// 获取上传的第一张图片，若希望input实现多文件上传。添加属性multiple="multiple"。
        if(!!file){// 判断是否选择文件
            var reader = new FileReader();// 读取文件对象
            // 图片文件转换为base64
            reader.readAsDataURL(file);// 读取文件
            reader.onload = function(){// 读取完毕执行
                  // 获取显示图片img。设置src属性地址为显示当前选择的图像
                  document.getElementById("file_img").src = this.result;
            }
        }
    };
</script>