图片上传实现预览效果

js+files对象简单的实现图片上传预览效果

一步一步的优化，从简单的开始，加油！

利用去访问文件中的图片，并使用change事件来监听是否有文件上传
获取file对象
解析对象，转成base64对象的url

图片: js+files对象简单的实现图片上传预览效果

代码如下：

<!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>

js+files对象简单的实现图片上传预览效果

js+files对象简单的实现图片上传预览效果

代码如下：

相关推荐