图片上传时校验图片格式、大小及尺寸

对于图片上传，大家应该都不陌生，有时候需要对图片的格式及大小进行校验。但是随着业务的发展，现在越来越多的地方，对图片的长宽尺寸有严格的限制，只校验图片的格式及大小，已经不能满足目前的需求。

File API

谈到图片、文件上传，就不得不提File API。 File API在表单文件输入字段基础上，添加了一些直接访问文件信息的接口。HTML5 在DOM中为文件输入元素添加了一个files集合。File 对象是特殊类型的Blob，且可以用在任意的Blob 类型的context中。比如： FileReader,URL.createObjectURL(),createImageBitma()及XMLHttpRequest.send()都能处理Blob和File。

File接口继承了Blob接口属性：

File.lastModified
只读，返回当前File对象所引用文件最后修改时间，自1970年1月1日0:00以来的毫秒数
File.lastModifiedDate
只读，返回当前file对象所引用文件最后修改时间
File.name
只读，返回当前File对象所引用文件的名字
File.size
只读，返回文件的大小
File.type
只读，返回文件的MIME类型

通过File API提供的FileReader类型，可以读取文件中的数据。FileReader是一种异步文件读取机制。FileReader提供了下面几个方法：

1、 readAsText(file, encoding): 以纯文本形式读取文件，将读取到的文本保存在 result 属性中，第二个参数用于指定编码类型，是可选的。
2、 readAsDataURL(file): 读取文件并将文件数据以URI的形式保存在result属性中
3、 readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中，字符串中每个字符表示一字节
4、 readAsArrayBuffer(file): 读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中

由于读取过程是异步的，FileReader也提供了几个事件，最常用为progress、error和load事件。

关于图片格式及大小

首先，对于图片的格式，可以从图片选择上传这一步就可以规避不需要的图片格式。

//只允许上传jpeg,png格式的图片
<input type='file' accept='image/jpeg, image/png'>
//不限制图片格式
<input type='file' accept='image/*'>

如果不设置accept属性，也可以在 onchange 事件中取得 files 值，然后对文件的 type 属性进行校验。

<div class='test'>
    <input type='file' id='test''>
</div>
<script>
    document.getElementById('test').onchange = function(e){
        var reg = /jpeg||png/;
        console.log(reg.test(this.files[0].type))

        //图片的大小, byte
        console.log(this.files[0].size)
    }
</script>

图片的长宽尺寸

<div class='test'>
    <input type='file' id='test' multiple accept='image/*'>
</div>
<script>
    document.getElementById('test').onchange = function(e){
        var that = this;
        //此处针对的是多图片上传
        //如果是单张图片，可跳过for循环 ，执行that.files[0]
        for(var m = 0; m < that.files.length; m++){
            _loop(m);
        }
        function _loop(m){
            var reader = new FileReader()
            reader.onload = function(e){
                console.log(e)
                var data = e.target.result
                var image = new Image()
                image.onload = function(){
                    var width = image.width
                    var height = image.height
                    console.log('第' + (m + 1 ) + '张图片的宽高：' + width + 'x' + height)
                }
                image.src = data
            }
            reader.readAsDataURL(that.files[m])
        }
    }
</script>

参考：

File
[Javascript高程]