<!-- 样似总结:
用a标签代替file,做文件上传。 将file进行绝对定位,透明度设置为0;宽度为“上传图片”的宽度,超出部分隐藏。
这样做是为了将file隐藏起来。用a标签代替file
a标签变为块级元素,并且进行相对定位。
通过<input />标签,给它指定type类型为file,可提供文件上传;
accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*;
multiple:规定是否可以选择多个文件;
规定只可上传图片,且可以选择多个文件
https://blog.csdn.net/chen357313771/article/details/40583163?utm_source=app 样似参看
-->
<style>
.imgview{
150px;
height: 150px;
border-radius: 50%;
border: 1px solid red;
}
.a{
position: relative;
display: block;
text-decoration: none;
color: aqua;
}
.fileopen{
position: absolute;
left: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
64px;
overflow: hidden;
}
</style>
<a href="javascript:void(0);" class="a"><input type="file" class="fileopen">上传图片</a>
<img src="" alt="" class="imgview" accept="image/png, image/jpeg, image/gif, image/jpg">
<script>
var input = document.querySelector("input");
//当选择完成图片之后调用
input.onchange = function(){
//1. 拿到fileinput里面的文件, 这个file是一个file对象, file对象不能直接展示的
var file =input.files[0];
console.log(file);
//2. 读取文件,成功img标签可以直接使用的格式
//FileReader类就是专门用来读文件的
var reader = new FileReader();
//3. 开始读文件
//readAsDataURL: dataurl它的本质就是图片的二进制数据, 进行base64加密后形成的一个字符串, 这个字符串可以直接作用img标签的图片资源使用
reader.readAsDataURL(file);
//4. 因为文件读取是一个耗时操作, 所以它在回调函数中,才能够拿到读取的结果
reader.onload = function() {
console.log(reader.result);
//直接使用读取的结果
document.querySelector("img").src = reader.result;
}
document.querySelector("img").src = file;
}
</script>