FileReader对象
在一些项目中,经常会遇到图片上传的情况,为了提高用户体验,一般会要求选择图片后 能预览一下图片。
以前的做法是 通过 ajax上传图片后,然后再显示出来,这样会产生大量的无用的图片文件,在HTML5的时代,有了FileReader对象,可以在浏览器选择本地的图片后,立马就可以在浏览器中显示选择的图片。
使用如下:
HTML代码:
<div style="width:200px;">
<p><img id="img" src="" alt="头像"/></p>
<p><input type="file" id="file" name="file" onchange="imgPreview();"/></p>
<p>账户:<input type="text" id="username"/></p>
<p>密码:<input type="password" id="password"/></p>
<p><input type="button" value="注册" onclick="register();"/></p>
</div>
JS代码(使用了JQuery):
/*
选择图片后图片预览
*/
function imgPreview(){
if(typeof FileReader != 'undefined'){ //支持
//获取上传文件
var file = $('#file')[0].files[0];
//是否对应图片格式
if(!/image\/\w+/.test(file.type)){ //不是图片格式
alert('请选择图片!');
return false;
}
var reader = new FileReader();
//将文件以DataURL的形式读入
reader.readAsDataURL(file);
//读入完毕以后
reader.onload = function(e){
//显示文件
$('#img')[0].src = this.result;
};
}
}