文件操作

　　FileList对象

　它是File对象的一个集合，在HTML4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置multiple，就支持多文件上传，所以从此标签中获取的files属性就是FileList对象实例。

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">

　　　　<head>

　　　　　　　　$(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>

　　　　　　<hr />

　　　　</body>

　　</html>

　　读取文件上传内容并将文件内同直接读取到浏览器上

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　　　<head>

　　　　　　　　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>

　　　　</body>

　　</html>