H5 中的 new FileReader() 以及 识别上传的文件是否为图片

如果浏览器版本较高支持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>复制代码