html5表单上传控件Files API
表单上传控件：
（IE9及以下不支持下面这些功能，其它浏览器最新版本均已支持。）
1、允许上传文件数量
2、上传指定的文件格式
这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式，可手动修改成其它文件格式。
如果不限制上传图片的格式可写成：accept="image/*"
其它格式参考如下：
| *.3gpp | audio/3gpp, video/3gpp | 3GPP Audio/Video |
| *.ac3 | audio/ac3 | AC3 Audio |
| *.asf | allpication/vnd.ms-asf | Advanced Streaming Format |
| *.au | audio/basic | AU Audio |
| *.css | text/css | Cascading Style Sheets |
| *.csv | text/csv | Comma Separated Values |
| *.doc | application/msword | MS Word Document |
| *.dot | application/msword | MS Word Template |
| *.dtd | application/xml-dtd | Document Type Definition |
| *.dwg | image/vnd.dwg | AutoCAD Drawing Database |
| *.dxf | image/vnd.dxf | AutoCAD Drawing Interchange Format |
| *.gif | image/gif | Graphic Interchange Format |
| *.htm | text/html | HyperText Markup Language |
| *.html | text/html | HyperText Markup Language |
| *.jp2 | image/jp2 | JPEG-2000 |
| *.jpe | image/jpeg | JPEG |
| *.jpeg | image/jpeg | JPEG |
| *.jpg | image/jpeg | JPEG |
| *.js | text/javascript, application/javascript | JavaScript |
| *.json | application/json | JavaScript Object Notation |
| *.mp2 | audio/mpeg, video/mpeg | MPEG Audio/Video Stream, Layer II |
| *.mp3 | audio/mpeg | MPEG Audio Stream, Layer III |
| *.mp4 | audio/mp4, video/mp4 | MPEG-4 Audio/Video |
| *.mpeg | video/mpeg | MPEG Video Stream, Layer II |
| *.mpg | video/mpeg | MPEG Video Stream, Layer II |
| *.mpp | application/vnd.ms-project | MS Project Project |
| *.ogg | application/ogg, audio/ogg | Ogg Vorbis |
| application/pdf | Portable Document Format | |
| *.png | image/png | Portable Network Graphics |
| *.pot | application/vnd.ms-powerpoint | MS PowerPoint Template |
| *.pps | application/vnd.ms-powerpoint | MS PowerPoint Slideshow |
| *.ppt | application/vnd.ms-powerpoint | MS PowerPoint Presentation |
| *.rtf | application/rtf, text/rtf | Rich Text Format |
| *.svf | image/vnd.svf | Simple Vector Format |
| *.tif | image/tiff | Tagged Image Format File |
| *.tiff | image/tiff | Tagged Image Format File |
| *.txt | text/plain | Plain Text |
| *.wdb | application/vnd.ms-works | MS Works Database |
| *.wps | application/vnd.ms-works | Works Text Document |
| *.xhtml | application/xhtml+xml | Extensible HyperText Markup Language |
| *.xlc | application/vnd.ms-excel | MS Excel Chart |
| *.xlm | application/vnd.ms-excel | MS Excel Macro |
| *.xls | application/vnd.ms-excel | MS Excel Spreadsheet |
| *.xlt | application/vnd.ms-excel | MS Excel Template |
| *.xlw | application/vnd.ms-excel | MS Excel Workspace |
| *.xml | text/xml, application/xml | Extensible Markup Language |
| *.zip | aplication/zip | Compressed Archive |
3、FileList上传文件数组
FileList对象都是一组文件对象的集合，而文件对象则拥有下列的属性：
name – 文件名（不包含路径）
type – 文件的MIME类型（小写）
size – 文件的尺寸（单位为字节）
lastModifiedDate 为上传文件的最后修改时间
通过上面的几个对象，我们能够控制用户上传的文件大小和文件类型，以便减轻服务器再次检测时的压力，并提升安全系数。
var a=document.getElementById("file");
a.οnchange=function(e){
e=e || window.event;
var b=e.target.files;
alert(b[0].name);
}4、拖动上传
dataTransfer 对象
dropEffect[=sCursorStyle]
设置或获取拖拽操作的类型和要显示的光标类型
copy：复制样式被显示
link：链接样式被显示
move：移动样式被显示
none：默认,没有鼠标样式被定义
effectAllowed[=sEffect]
设置或获取数据传送操作可应用与该对象的源元素
copy 选项被复制
link 选项被dataTransfer作为link方式保存
move 当放置时,对象被移动至目标对象
copylink 选项是被复制还是被作为link方式保存关键在于目标对象
linkmove 选项是被作为link方式保存还是被移动关键在于目标对象
all 所有效果都被支持
none 不支持任何效果
uninitialized 默认不能通过这个属性传递任何值
setData(sFormat,sData) 将指定格式的数据赋值给dataTransfer或者clipboardData sFormat:URL,Text
getData(sFormat) 从dataTransfer或者clipboardData中获取值 sFormat:URL,Text
clearData([sFormat]) 通过dataTransfer或者clipboardData中删除某种格式的数据 sFormat:Text,URL,File,HTML,Image
5、FileReader文件预览，读取文件数据（同时可读取图片文件宽高）
FileReader包含四种异步读取文件的方式：
FileReader.readAsBinaryString(Blob|File) - result属性包含的是file/blob的二进制字符串形式的数据。每个字节由一个0-255的整数表示。
FileReader.readAsText(Blob|File, opt_encoding) - result属性包含的是以文本方式表示的file/blob数据。默认情况下，字符串以'UTF-8'编码方式解码。使用opt_encoding参数可以指定一个不同的格式。
FileReader.readAsDataURL(Blob|File) - result属性包含的是以data URL编码的file/blob数据。
FileReader.readAsArrayBuffer(Blob|File) - result属性包含的是以ArrayBuffer对象表示的file/blob数据。
一旦这些read方法被调用，onloadstart, onprogress, onload, onabort, onerror, onloadend就可以被用来追踪进度。
上传图片预览：
上传txt文件内容预览(需对<>&'"|等符号进行过滤否则会中断读取)：
读取上传txt指定区域文本内容：
6、文件读取进度
参考资料：
http://blog.csdn.net/zhu1988renhui/article/details/7936525
http://dev.w3.org/2006/webapi/FileAPI/#dfn-filereader
http://www.html5rocks.com/zh/tutorials/file/dndfiles/
http://www.w3.org/TR/file-upload/
http://www.w3.org/TR/file-upload/#dfn-filereader
http://www.w3.org/TR/file-upload/#dfn-Blob
http://www.w3.org/TR/file-upload/#dfn-fileerror
http://www.w3.org/TR/progress-events/#Progress
http://www.zhangxinxu.com/wordpress/?p=1923