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

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

最基本的上传文件标签

可以进行多文件上传的标签

可以对上传类型进行限制的标签

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

upload文件夹中的全部文件

使用accept进行控制只允许上传jpg后缀的文件：

点击上传按钮如下图：

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

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

显示全部文件的文件框

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

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对象。

四个方法：

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

监听事件：

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




    
    Document

参考：

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