使用FileReader()预览图片，判断文件类型与大小

HTML 内容如下：

<input type="file" id="files" ref="input">

<img src="" id="xmTanImg" alt="">

JavaScript 内容如下：

var reader = new FileReader();
$("#files").on('change',function(e){
    var input = document.getElementById("files");
    var files = this.files;
    reader.readAsDataURL(files[0]);
    reader.onload = function(e){
        console.log(e);
        if(dataArr.length<=4){
            $(".uploadImg .img").remove();
            dataArr.push(e.target.result);
            imgArr.push(files);
            $(".uploadName .length").text(dataArr.length+'/5');
            var html = template('imgUploads',{dataArr:dataArr});
            $(".before").before(html);
        }
    }

　　

　　//document.getElementById("xmTanImg").src = URL.createObjectURL(this.$refs.input.files[0])

　　console.log(imgArr); 
})

　　vue获取写法：

console.log(this.$refs.input.files)

　　

 判断上传文件的类型：

           inputFileUpload(file){
                let reader = new FileReader();
                console.log("这是input file 上传的文件");
                //判断上传文件的大小
                let fileName = this.$refs.input.files[0].name.split(".");
                console.log(this.$refs.input.files[0].name);
                if(this.$refs.input.files[0].size > 2*1024*1024){
                    this.$message("该文件超过2M");
                    document.getElementById("input").value = '';
                    return
                }
                console.log(fileName[1]);
                //判断上传文件的类型
                if(fileName != 'xls'){
                    this.$message("请上传execl文件");
                    document.getElementById("input").value = '';
                    return ;
                }
                console.log(document.getElementById("input").files);
                // let files = this.$refs.input.files;
                // document.getElementById("xmTanImg").src = URL.createObjectURL(this.$refs.input.files[0])
                // reader.readAsDataURL(files[0]);
                // reader.onload = function(e){
                //     var img = document.getElementById("xmTanImg");
                //     img.src = e.target.result;
                // }
            },