HTML5 文件API

向右看齐 2022-07-13 02:18 200阅读 0赞

1.FileList对象和file对象  
FileList对象表示用户选择的文件列表。在HTML5中，通过multiple属性，file控件内允许一次放置多个文件。控件内的每个用户选择的文件都是一个file对象，而FileList对象则为这些file对象列表，代表用户选择的所有文件。  
file对象有两个属性，name属性表示文件名，lastModifiedDate属性表示文件的最后修改日期。

<input type="file" id="file" multiple size="80" />
    
    <script> //file对象为用户选择的单个文件 file=documnet.getElementById("file").files[i]; //FileList为文件列表 alert(file.name); </script>

2.ArrayBuffer对象和ArrayBufferView对象  
ArrayBuffer对象代表一个固定长度的用于装载数据的缓存区，这些数据来自于文件或者网络。  
在HTML5中，不能直接对ArrayBuffer对象中内容进行操作，需要使用ArrayBufferView对象读写ArrayBuffer对象中的内容，这个对象将缓存区中的数据转换为各种数值类型的数组。  
1) 创建ArrayBuffer对象

var buf=new ArrayBuffer(32);

创建ArrayBuffer对象的时候，需要使用一个无符号长整数(unsigned long)类型参数，用于指定缓存区的长度。在成功创建ArrayBuffer缓存区后，该缓存区所有数据都被初始化为0.ArrayBuffer对象有一个length属性，属性值为缓存区的长度。  
2)ArrayBufferView对象的作用在于：根据同一个ArrayBuffer对象来创建各种数值类型的数组

//根据ArrayBuffer对象创建32位整数数组
    var Int32Array=new Int32Array(ArrayBuffer);
    
    //根据同一个ArrayBuffer对象创建8位无符号整数数组
    var uInt8Array=new Uint8Array(ArrayBuffer);

在创建一个ArrayBufferView对象时，除了需要指定该对象所要引用的ArrayBuffer缓存区外，还有两个可选的参数：  
byteOffset:数组所开始引用的位置与ArrayBuffer缓存区第一个字节之间的偏离值，单位为字节。属性值为数组中单个元素的字节长度的倍数。  
length:代表数组中元素的个数，不指定该参数值时会根据缓存区的长度和对象开始引用的位置，每个元素字节的长度自动计算出元素的个数。  
3)存取ArrayBuffer缓存区中的数据

var byte=uInt8Array[4];//读取第5个字节的数据
    uInt8Array[4]=1; //设置第5个字节的数据

3.DataView对象  
DataView类继承了ArrayBufferView类，也可以用来存取ArrayBuffer缓存区中的数据。

var view=new DataView(buffer,byteOffset,byteLength);

第一个参数是ArrayBuffer对象，代表一个ArrayBuffer缓存区。

getInt8:用于得到指定位置处的一个8位整数。

var int8Value=dataview.getInt8(byteOffset);//byteOffset代表获取的整数所在位置与DataView对象缓存区开始引用位置之间相隔多少个字节

setInt8:用于设定指定位置处的一个8位整数的数值

dataview.setInt8(byteOffset,value);//第二个参数为设定的数值

4.Blob对象  
Blob对象代表原始二进制数据。有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。

<input type="file" id="file" />
    <input type="button" value="显示文件信息" onclick="ShowFileType()" />
    文件字节长度：<span id="size"></span> <br/>
    文件类型：<span id="type"></span>
    
    <scritp>
    function ShowFileType(){
       var file;
       //得到用户选择的第一个文件
       file=document.getElementById("file").files[0];
       var size=document.getElementById("size");
       //显示文件字节的长度
       size.innerHTML=file.size;
       var type=document.getElementById("type");
       //显示文件类型
       type.innerHTML=file.type;
    }
    </script>

HTML5已经对file控件添加了accept属性，让file控件只能接受某种类型的文件。但是目前主流浏览器对它的支持只限于打开文件选择窗口时，默认选择的图像文件而已。如果选择其他类型文件，file控件也能正常接受。

1)创建Blob对象  
当创建Blob对象时，不使用任何参数

var blob=new Blob();//对象的字节长度为0

Blob构造函数中第一个参数为一个数组，可以存放任意数量个ArrayBuffer，ArrayBufferView,Blob,String对象，这些对象携带的数据将被依次追加到Blob对象。

var blob=new Blob(["1234"+"5678"]);
    var shorts=new Uint16Array(buffer,512,128);
    var blobA=new Blob([blob,shorts]);

Blob构造函数中第二个参数指定创建的Blob对象的type属性值，当不使用该参数值时，默认参数值为空字符串，代表未知类型。

var blob=new blob(["1234"+"5678"],{
       type:"text/plain;charset=UTF-8"});

在创建Blob对象之前，可以先判断浏览器是否支持Blob对象

if(!window.Blob)//如果浏览器不支持Blob对象
    alert("您的浏览器不支持使用Blob对象")；

2)Blob对象的slice方法  
从Blob对象所代表的原始二进制数据中抽离一部分数据，然后将这些数据创建为一个新的Blob对象。

var newBlob=blob.slice(start,end,contentType);

如果三个参数都省略时，相当于把一个Blob对象中的原始二进制数据原样复制到一个新建的Blob对象。

var fileClone=file.slice();
    var fileClone2=file.slice(0,file.size);

5.FileReader对象  
把文件读入内存，并且读取文件中的数据。  
1)方法  
readAsBinaryString:将Blob对象或文件中的数据读取为二进制字符串  
readAsText:将Blob对象或文件中的数据读取为文本数据  
readAsDataURL:将Blob对象或文件中的数据读取为DataURL  
readAsArrayBuffer:将Blob对象或文件中的数据读取为ArrayBuffer对象  
abort:中断读取操作  
2)事件  
onabort:数据读取中断时触发  
onprogress:数据读取中  
onerror:数据读取出错时触发  
onload:数据读取成功完成时触发  
onloadstart:数据读取开始时触发  
onloadend:数据读取完成时触发，无论成功或者失败