FileList对象
它是File对象的一个集合，在HTML4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置multiple，就支持多文件上传，所以从此标签中获取的files属性就是FileList对象实例。
<input type="file" mutiple="multiple" name="filedemo" id="filedemo">
API：
interface FileList{
getter File? item(unsigned long index);
readonly attribute unsigned long length;
}
Blog对象
一个原始数据对象，提供了slice方法可以读原始数据中的某块数据。另外有两个属性:size(数据的大小)和type(数据的MIME类型)。
API:
interface Blob{
readonly attribute unsigned long long size;
readonly attribute DOMString type;
Blob slice{
optional long long start,
optional long long end,
optional DOMString contentType
}
}
File对象
继承自Blob对象，指向一个具体的文件，它还有两个属性:name和lastModifiedDate
API:
interface File : Blob{
readonly attribute DOMString name;
readonly attribute Date lastModifiedDate;
}
FileReader对象
设计用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据使用了异步的方式，十分有效。
API:
[Constructor]
interface FileReader : EventTarget{
void readAsArrayBuffer(Blob blob);
void readAsBinaryString(Blob blob); //传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中
void readAsText(Blob blob, optional DOMString encoding); //第一个参数传入Blob对象，第二个参数传入编码格式，异步将数据读取成功后放到result属性中读取内容是普通的文本字符串的形式
void readAsDataURL(Blob blob); //传入一个Blob对象，读取内容可以作为URL属性
void abort();
const unsigned short EMPTY = 0;
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
readonly attribute any result;
readonly attribute DOMError error;
attribute [TreaNonCallableAsNull] Function? onloadstart?
attribute [TreatNonCallableAsNull] Function? onprogress?
attribute [TreatNonCallableAsNull] Function? onload?
attribute [TreatNonCallableAsNull] Funtcion? onabosrt?
attribute [TreatNonCallableAsNull] Function? onerror?
attribute [TreatNonCallableAsNull] Function? onloadend;
}
这个对象提供了四个读取文件数据的方法，这些方法都是以异步的方式读取数据，读取成功后直接将结果存放到属性result中。所以一般都是直接读取数据，然后监听次对象的onload事件，然后在事件里读取result属性，再做后续处理。
获取上传文件的文件名
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.5.1.js" type="text/javascript" />
<script type="text/javascript">
$(function(){
$("#btnGetFile").click(function(e){
var fileList = document.getElementById("filedemo").files;
for(var i = 0; i < fileList.length; i++){
if(!(/image/w+/.test(fileList[i]).type))){
$("#result").append("<span>type:"+fileList[i].type+"--非图片类型--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
}else{
$("#result").append("<span>type:"+fileList[i].type+"--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
}
}
});
});
</script>
</head>
<body>
<form action="" method="POST" novalidate="true">
<input type="file" multiple="miltiple" name="filedemo" id="filedemo" /><br />
<input type="button" value="获取文件名字" id="btnGetFile" />
<div id="result"></div>
</form>
<hr />
</body>
</html>
读取文件上传内容并将文件内同直接读取到浏览器上
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<titile></title>
<script src="jquery-1.5.1.js" type="text/javascript" />
<script>
if(typeof FileReader == "undefied")
alert("浏览器过老");
function showDataByURL(){
var resultFile = document.getElementById("filedemo").files[0];
if(resultFile){
var reader = new FileReader();
reader.readAsDataURL(resultFile);
reader.onload = function(e){
var urlData = this.result;
document.getElementById("result").innerHTML += "<img src='"+urlData+ "' alt='" +resultFile.name+"' />";
};
}
}
function showDateByBinaryString(){
var resultFile = document.getElementById("filedemo").files[0];
if(resultFile){
var reader = new FileReader();
reader.readAsBinaryString(resultFile);
reader.onload = function(e){
var urlData = this.result;
document.getElementById("result").innerHTML += urlData;
};
}
}
function showDataByText(){
var resultFile = document.getEementById("filedemo").files[0];
if(resultFile){
var reader = new FileReader();
reader.readAsText(resultFile, 'gb2312');
reader.onload = function(e){
var urlData = this.result;
document.getElementById("result").innerHTML += urlData;
}
}
}
</script>
</head>
<body>
<input type="file" name="filedemo" id="filedemo" multep />
<input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();" />
<input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();" />
<input type="button" value="readAsText" id="readAsText" onclick="showDataByText();" />
<div id="result" />
</body>
</html>