简单实现图片上传的预览

实现图片的上传预览:

  之前公司业务需求,找了好多实现图片上传预览的例子,发现都不太好用,比较麻烦,后来同事推荐的一种方法,比较简单而且实现了功能。话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="file" id="img" />
<div id="div"></div>
</body>
<script>
    var reader = new FileReader();
    var img = document.getElementById("img");
    var div = document.getElementById("div");
    img.onchange = function() {
        var file = img.files[0];
        reader.readAsDataURL(file);
        reader.onload = function() {
            div.innerHTML = "<img src = '" + this.result + "' />"
        }
    }
</script>
</html>

猜你喜欢

转载自www.cnblogs.com/zhaoletian/p/8990206.html