前端上传图片并预览

最新推荐文章于 2019-07-04 15:57:48 发布

Claire_ljy

最新推荐文章于 2019-07-04 15:57:48 发布

阅读量100

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/love314159/p/9115829.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <input type="file" id="file" />
        <img class="img" id="img" src="" alt="" />
        <script>
            var File = document.getElementById('file');
            File.onchange = function(e){
                var file = this.files[0];
                console.log(this.files[0])
                var reader = new FileReader();   
                reader.readAsDataURL(file); 
                reader.onloadend = function (e) {
                    console.log(e.target)
                document.getElementById('img').setAttribute("src",e.target.result);    //e.target.result就是最后的路径地址
                };    
            }
        </script>
    </body>
</html>