上传头像或单张图片并预览

来源：互联网发布：被上苍诅咒的天才知乎编辑：程序博客网时间：2024/05/19 20:45

实现效果：上传头像或者上传单张图片并预览；

知识点：

input标签里面的 accept属性是限制选择文件的格式；

FileReader是HTML5的本地预览图片接口

onloadstart函数数据开始读取时触发

onload函数数据读取成功完成时触发

onloadend 数据读取完成时触发，无论成功失败

代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#oDiv{height:200px;width:200px;border:1px solid #000;text-align: center;margin-bottom: 10px;}</style></head><body><div class="all"><div id="oDiv"></div><input type="file" accept="image/*" id="oInput" value="" /></div></body><script type="text/javascript">document.getElementById("oInput").addEventListener("change",function(e){var files = this.files;var img = new Image();var render  = new FileReader();render.readAsDataURL(files[0]);render.onloadstart = function(){//alert("start")};render.onload = function(){img.src = this.result;img.style.height = "100%";img.style.width = "100%";var oDiv = document.getElementById("oDiv");oDiv.innerHTML = "";oDiv.appendChild(img);//alert("success");};render.onloadend = function(){//alert("end");}});</script></html>

阅读全文

0 0