HTML5 图片上传，预览，限制图片原始宽高和尺寸

前言：该解决方案只支持IE10及以上，目前来看IE9及以下所占的份额越来越小了，如果在项目不需要考虑IE9及以下的情况下，使用HTML5是最好的方案。

HTML上传文件的标签

<input type="file">
最基本的上传文件标签

<input type="file" multiple="">
可以进行多文件上传的标签

<input type="file" accept=".jpg,.gif">
可以对上传类型进行限制的标签

使用accept属性对上传文件类型进行限制很方便，但是很容易被破解。如下图：

upload文件夹中的全部文件

使用accept进行控制只允许上传jpg后缀的文件：
<input type="file" accept=".jpg">
点击上传按钮如下图：

只显示jpg文件的选择文件框

但是当我们选择右下角的文件类型为所有文件，如下图：

显示全部文件的文件框

所以目前看来使用accept属性对上传文件类型进行限制基本上算是防君子不防小人了。

JS对应的事件和file控件DOM对象的接口

file控件上传文件时触发的事件是onchange。

file控件DOM对象提供了多个文件操作API：

FileList对象表示用户选择的文件列表，在HTML4中file控件内只允许放置一个文件，但在HTML5中通过添加multiple属性，file控件内允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList就是这些file对象的列表，代表用户选择的所有文件。
调用方法：假设file控件DOM对象名为file，则调用方法为file.files。
file对象有两个属性，一个是name，代表文件名不包含文件的路径；一个是lastModifiedDate，表示文件最后被修改的日期。
调用方法：假设file控件DOM对象名为file，则第一个用户选择文件的调用方法为file.files[0]。
HTML5中Blob表示二进制原始数据，它提供一个slice()方法，可以通过这个方法访问到字节内部的原始数据块。事实上，上面提到的file对象继承了Blob对象。Blob对象的两个属性，
size：表示一个对象的字节长度。
type：表示一个对象的MIME类型，如若是未知类型返回空字符串。
调用方法：没有调用方法，只是file控件DOM对象的file对象继承了Blob对象。

FileReader接口

四个方法：

方法名	参数	描述
readAsBinaryString()	file	将文件读取为二进制字符串，通常将它传到后端，后端可以通过这段字符串存储文件
readAsDataURL()	file	将文件读取为一段data url字符串，事实上是将小文件以一种特格式的URL地址直接读取到页面。小文件通常指图片与html等格式文件
readAsText()	file [encoding]	将文件以文本的方式读取，其中第二个参数为文本的编码
abort()	(none)	中断读取操作

监听事件：

事件	描述
onabort	数据读取中断时发生
onerror	数据读取出错时发生
onloadstart	数据读取开始时发生
onload	数据读取成功完成时发生
onloadend	数据读取完成时发生无论读取成功还是失败
onprogess	数据读取中

一个简单的例子：
只实现了IE10以上的图片上传预览，已经获取文件类型，大小和宽高，并且打印了日志，但是没有阻止上传。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <div><img src="" alt=""></div>
        <input type="file" multiple="">
    </form>
<script>
    var img1 = document.querySelector('img');
    var div = document.querySelector('div');
    var input = document.querySelector('input');
    input.onchange = function () {
        if (input.files && input.files[0]) {
            if(input.files[0].type == "image/jpeg" || input.files[0].type == "image/gif" || input.files[0].type == "image/png"){
                var byteSize = input.files[0].size / 1024;
                if(byteSize <= 250){
                    var reader = new FileReader();
                    reader.readAsDataURL(input.files[0]);
                    reader.onload = function(ev){
                        var txt = ev.target.result;
                        var img = new Image();
                        img.src = txt;
                        img.onload = function(){
                            if(img.width <= 500 && img.height <= 500){
                                console.log("图片没有错");
                                img1.src = txt;
                            }else{
                                console.log("尺寸不对 " + img.width + "*" + img.height);
                            }
                        }
                    }
                }else{
                    console.log("文件大小超出 " + byteSize);
                }
            }else{
                console.log("文件类型不对 " + input.files[0].type);
            }
        }else{
            console.log("没有上传，使用默认");
        }
    }
</script>
</body>
</html>

参考：

下一步目标：实现拖拽上传