H5新属性FileReader实现选择图片后立即显示在页面上 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" id="file"  multiple="multiple" onchange="read()">
<div id="imgDiv"></div>
</body>
<script>
    //可以选择多个文件加载在页面
   function read(){
        var file = document.getElementById("file");
        var imgDiv = document.getElementById("imgDiv");
        for(var i=0;i<file.files.length;i++){
            let reader = new FileReader();
            var file1 = file.files[i];
            reader.readAsDataURL (file1);
            reader.onload = function (result) {
                //reader对象的result属性存储流读取的数据
                imgDiv.innerHTML += '<img src="' + reader.result + '" alt=""/>'
                console.log(reader.result) // 打印出转换后的base64
            }
        }
    }
</script>
</html>

 

推荐博客：https://blog.csdn.net/yaoyuan_difang/article/details/38582697

posted @ 2018-08-29 17:48  发疯的man  阅读(1488)  评论(0)  编辑  收藏  举报