上传文件及时预览demo

最新推荐文章于 2024-04-29 14:16:30 发布

Arya_1s

最新推荐文章于 2024-04-29 14:16:30 发布

阅读量402

点赞数

分类专栏：前端大法好

本文链接：https://blog.csdn.net/qq_20417227/article/details/53216509

版权

前端大法好专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>头像即时预览</title>  
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>  
<script type="text/javascript">  
 //选择封面图片  
    function preview(file){  
         var prevDiv = document.getElementById('preview');  
         if (file.files && file.files[0]){  
         var reader = new FileReader();  
         reader.onload = function(evt){  
         prevDiv.innerHTML = '<img src="' + evt.target.result + '" width="100xp" height="120px"/>';  
        }  
         reader.readAsDataURL(file.files[0]);  
        }
    }  
</script>  
<style>  
 span, input, img{  
    margin: 0;  
    padding: 0;  
    list-style: none;  
    border: none;  
}  
.img {  
    width: 100px;  
    height: 120px;  
    border: 1px solid #bbb;  
}  
.choose {  
    display: inline-block;  
    height: 33px;  
    width: 100px;  
    border: 1px solid #bbb;  
    border-radius: 4px;  
    line-height: 33px;  
    outline: none;  
    text-align: center;  
    color: #0dac75;  
}  
.file {  
    position: absolute;  
    left: 0;  
    width: 100px;  
    opacity: 0;  
}  
div input {  
    height: 33px;  
    padding-left: 5px;  
    border: 1px solid #bbb;  
    border-radius: 4px;  
    line-height: 33px;  
    outline: none;  
}  
input[type="file" i] {  
    align-items: baseline;  
    color: inherit;  
    text-align: start;  
}  
</style>  
</head>  

<body>  

<div >  
    <div class="img" id="preview">  

    </div>  
    <span class="choose">选择头像</span>  
    <input type="file" class="file" onchange="preview(this)" />  
</div>                          

</body>  
</html>