若是浏览器版本较高支持FileReader,就可以直接取文件list(h5里file对象为一个list,可以上传多个文件)对象的类型,
所以可以得到后缀直接以此来判断上传的文件的类型。
file对象有filename.type和filename.size的API,因此我们需要获得文件的后缀,以此来判断文件类型。
if(typeof FileReader != 'undefined'){
var file = document.getElementById("imageFile").files[0];
if((file.type).indexOf("image/")==-1){
alert("提示", "请上传图片!", "warning");
} 复制代码
FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。
通过FileReader接口中的readAsDataURL()方法可以获取API异步读取的文件数据,另存为数据URL;将该URL绑定到img标签的src属性上,就可以实现图片的上传预览效果了。
var input = document.getElementById("file"); // input file
input.onchange = function(){
var file = this.files[0];
if(!!file){
var reader = new FileReader();
// 图片文件转换为base64
reader.readAsDataURL(file);
reader.onload = function(){
// 显示图片
document.getElementById("file_img").src = this.result;
}
}
}
<input type="file" id="file">
<div>
<img id="file_img"/>
</div>复制代码