前言：该解决方案只支持IE10及以上，目前来看IE9及以下所占的份额越来越小了，如果在项目不需要考虑IE9及以下的情况下，使用HTML5是最好的方案。
HTML上传文件的标签
<input type="file">
最基本的上传文件标签
<input type="file" multiple="">
可以进行多文件上传的标签
<input type="file" accept=".jpg,.gif">
可以对上传类型进行限制的标签
使用accept属性对上传文件类型进行限制很方便，但是很容易被破解。如下图：
使用accept进行控制只允许上传jpg后缀的文件：
<input type="file" accept=".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>
参考：
- http://blog.csdn.net/testcs_dn/article/details/8695532
- http://blog.csdn.net/oscar999/article/details/37499743/
- http://blog.csdn.net/hdchangchang/article/details/9036511
下一步目标：实现拖拽上传
