在html5中新增了两个与表单元素相关的api-文件api和拖放api。拖放api可以实现一些有趣的功能，允许我们拖动选项并将其放置到浏览器中的任何地方。这很好地体现了html5作为web应用程序规范的思路，使得开发者可以从桌面计算中借用更多的功能。

一、通过file对象选择文件

在HTML4中，file控件内只允许放置一个文件，
但是到了HTML5中，通过添加multiple属性，在file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个
file对象，而FileList对象则为这些file对象的列表，代表用
户选择的所有文件。
File对象有两个属性，name属性表示文件名，不包括路
径，lastModifiedDate属性表示文件的最后修改日期。

<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>FileList与file示例</title>
</head>
<script language=javascript>
function ShowName()
{
    var file;
    //返回FileList文件列表对象
    for(var i=0;i<document.getElementById("file").files.length;i++) 
	{
       //file对象为用户选择的单个文件
        file = document.getElementById("file").files[i];
        //弹出文件名
        alert(file.name);
    }
}
</script>
选择文件：
<input type="file" id="file"size="50"/>
<input type="button" onclick="ShowName();" value="上传文件"/>

二、使用Blob接口获取文件的类型与大小

Blob表示二进制原始数据，它提供一个slice方法(涉及到分片上传)，可以通过该方法访问到字节内部的原始数据块。Blob对象有两个属性，size属性表示一个blob对象的字节长度，type属性表示blob的MIME类型，如果是未知类型，则返回一个空字符串。
在上面的实例中，对于图像类型的文件，blob对象的type属性都是以
“image/”开头的，后面紧跟这图像的类型，利用此特性我们可以在JavaScript中判断用户选择的文件是否为图像文件，如果在批量上传时，只允许上传图像文件，可以利用该属性，如果用户选择的多个文件中有不是图像的文件时，可以弹出错误提示信息，并停止后面的文件上传，或者跳过这个文件，不将该文件上传。

if(!/image\/\w+/.test(file.type))
        {
            alert(file.name+"不是图像文件！");
            break;            
}

三、FileReader接口

有一种方法可以检查您的浏览器是否对FileReader接口提供
支持，如下所示：
if ( typeof FileReader === ‘undefined’ )
{
alert( " 您的浏览器未实现 FileReader 接口 " );
} else {
var reader = new FileReader(); // 正常使用浏览器
}
FileReader 的接口拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及它们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

FileReader接口中的属性

FileReader.error: 读取文件的时候发生的错误信息
FileReader.readyState:0-2数字，表示FileReader的状态
EMPTY 0 No data has been loaded yet.还没有加载到数据
LOADING 1 Data is currently being loaded.这正在加载数据
DONE 2 The entire read request has been completed.数据加载完成
FileReader.result:这个是最重要的属性。读取到的内容都存储在了这个属性中。只能在readyState DONE之后才能读取这个属性值。读取到的数据类型取决于用什么的方法去读取的文件。

FileReader接口中的方法

FileReader.abort()：终止读取文件的操作。这个方法一点结束，则readyState就成为了DONE
FileReader.readAsArrayBuffer()：开始读取文件的内容，一旦完成，则把文件的数据存储在ArrayBuffer中。当然ArrayBuffer自然会存储在FileReader的result属性中。
FileReader.readAsBinaryString()：以二进制的形式读取文件的内容。这个方法是非标准方法，不要使用。
FileReader.readAsDataURL()：将文件读取为DateUrl
FileReader.readAsText()：将文件的内容读取文本。读取纯文本内容的时候使用。

FileReader接口中的事件

FileReader.onabort：数据读取被中断时触发。

A handler for the abort event. This event is triggered each time the reading operation is aborted.

FileReader.onerror：数据读取发生错误时触发。

A handler for the error event. This event is triggered each time the reading operation encounter an error.

FileReader.onload：数据读取成功后触发。

A handler for the load event. This event is triggered each time the reading operation is successfully completed.

FileReader.onloadstart：数据开始读取时触发。

A handler for the loadstart event. This event is triggered each time the reading is starting.

FileReader.onloadend：数据读取完成后触发。不管数据读取成功还是失败都会触发。

A handler for the loadend event. This event is triggered each time the reading operation is completed (either in success or failure).

FileReader.onprogress：数据读取过程中触发。
A handler for the progress event. This event is triggered while reading a Blob content.

<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>fileReader对象的事件先后顺序</title>
</head>
<script language=javascript>
var result=document.getElementById("result");
var input=document.getElementById("input");
if(typeof FileReader=='undefined')
{
    result.innerHTML = "<p class='warn'>抱歉，你的浏览器不支持 FileReader</p>";
    input.setAttribute( 'disabled','disabled' );
} 
function readFile()
{
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    reader.onload = function(e)
    {
        result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        alert("load");
    }
    reader.onprogress = function(e)
    {
        alert("progress");
    }
    reader.onabort = function(e)
    {
        alert("abort");
    }
    reader.onerror = function(e)
    {
        alert("error");
    }
    reader.onloadstart = function(e)
    {
        alert("loadstart");
    }
    reader.onloadend = function(e)
    {
        alert("loadend");
    }
    reader.readAsDataURL(file);
}
</script> 

<p>
<label>请选择一个图像文件：</label>
<input type="file" id="file" />
<input type="button" value="显示图像" onclick="readFile()" />
</p> 
<div name="result" id="result">
<!-- 这里用来显示读取结果 -->
</div>