jquery实现基本的图片上传预览

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>图片上传预览</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="preview_img"/>
</body>
<script>
    $(document).on("change","#preview_img",function(event){        

        /*添加预览图片节点*/
        var node = "<img id='imgBox'>";
        $(this).after(node);

        /*调用readAsDataURL接口，将图片读取为DataURL*/
        var file = event.target.files[0];
        var f = new FileReader();
        f.readAsDataURL(file);

        /*读取成功后显示图片*/
        f.onload = function(e){
            var src = e.target.result;
            $("#imgBox").attr("src",src);
        }
    });
</script>
</html>

 

posted @ 2017-05-27 16:58  一只黑猫  阅读(354)  评论(0)    收藏  举报