html 让文件域选择文件,Html5增强的文件上传域

#### file：增加了两个属性。**但是兼容性不好，不要用**

* accept:该属性控制允许上传的文件类型

该属性有一个或多个mime属性值，多个用“，”分开。

* multiple：该属性设置是否选择多个文件。

#### file对象是javascript对象，JS通过该对象可以获取文件的信息。

* name：返回file对象相应的文件名，不包含文件路径。

* type：返回file对象文件的mime类型字符串。

* size：返回file对象的大小。单位：B。

* **不能靠accept过滤文件类型，主要是后台控制**。

* **ie浏览器不支持**

* **File是files对象，例如document.getElementById("file1).files[0].size输出的是第一个文件的大小。**

```

上传：

上传

document.form1.but.οnclick=function(){

var f=document.form1.pic.files;

console.log("对象的名称:%s,对象的类型：%s，对象的大小：%s",f[0].name,f[0].type,f[0].size)

}

```

#### 使用filereader读取文件内容

* **readAsText(file,encodeing)**：以文本方式读取文件，其中encoding参数指定读取该文件时所用的字符集，该参数的默认值为utf-8。

* **readAsBinaryString(file)**：以二进制方式读取该文件。通过这种方式可以读取文件的二进制内容，这样可以通过ajax把数据传到服务器上。(读取图片)

* **readAsDataURL(file)**：以DataURL方式来读取文件，这种方式也可以用来读取二进制文件，只是这种方式将会采用base64方式把文件内容编码成DateURL格式的字符。(兼容性最好)

*实际上DataURL也是一种保存二进制文件的方式，一些特殊的场景下，如果不支持二进制，可以恢复成字符。*

* **abort**：停止读取。

* **fileReader**常用的读取方法是异步方法，这些方法不会直接返回结果内容，程序必须以事件监听方式来获取读取的结果，以下是监听读取方法：

onloadstart：开始读取数据时触发该事件。

onprogress：正在读取时触发该事件。

onload：成功读取后触发该事件。

onloadend：读取数据完成后触发该事件，无论成功还是失败。

onerror：读取失败时触发该事件。

```

浏览文件：

上传进度：

var reader=null;

if(FileReader){

reader=new FileReader();

}else{

alert('浏览器不支持');

}

var readb=function(){

reader.readAsBinaryString(document.getElementById("file1").files[0]);

var pro=document.getElementById("pro");

pro.max=document.getElementById('file1').files[0].size;

reader.οnprοgress=function(evt){

pro.value=evt.loaded;

//显示上传的文件大小

document.getElementById('result').innerHTML=evt.loaded;

}

}

```