上传头像即时预览

最新推荐文章于 2019-08-07 11:27:46 发布

Monkey18

最新推荐文章于 2019-08-07 11:27:46 发布

阅读量159

点赞数

文章标签：上传头像即时预览头像上传预

本文链接：https://blog.csdn.net/hzc1247776509/article/details/84822281

版权

点击上传头像，选择图片后，即时预览头像，代码如下

<!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]);
        }else{
         prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
         }
    }
</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" οnchange="preview(this)" />
</div>                        
  
</body>
</html>