URL.createObjectURL图片预览 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图片预览</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <input type="file" id="file" multiple>
    <script>
        var oFile = document.querySelector('#file')
        oFile.onchange = function() {
            console.log(this.files)
            // 遍历1
            Array.from(this.files).forEach(element => {
                var img = new Image()
                img.src = URL.createObjectURL(element)
                img.style.width = "120px"
                img.style.height = "90px"
                document.body.appendChild(img)
            })
            // 遍历2
            for(element of this.files) {
                var img = new Image()
                img.src = URL.createObjectURL(element)
                img.style.width = "120px"
                img.style.height = "90px"
                document.body.appendChild(img)
            }
        }
    </script>
</body>
</html>

　　

posted @ 2018-05-24 14:47  鱿鱼须须  阅读(153)  评论(0)    收藏  举报