css 代码:
.container{
width: 200px;
height: 200px;
border: 1px solid #666;
}
HTML 代码:
<input type="file" id="photo">
<div class="container"></div>
JavaScript 代码:
document.getElementById("photo").addEventListener("change",function(e){
var files =this.files;
var img = new Image();
var reader =new FileReader();
reader.readAsDataURL(files[0]);
reader.onload =function(e){
var dx =(e.total/1024)/1024;
if(dx>=2){
alert("文件大小大于2M");
return;
}
img.src =this.result;
img.style.width ="100%";
img.style.height ="90%";
document.querySelector('.container').appendChild(img);
}
})
FileReader 是html5提供读取文件的api,作用是把文本流按指定格式读取到缓存。
FileReader 有四种读取文件的方式:
readAsBinaryString、readAsDataURL、readAsText、readAsArrayBuffer;
基于预览上传后图片的需求,需要将图片读取为DataURL。
点击这里:自定义样式上传图片