html5---文件
1.文件
在<input>元素新添一个multiple属性,设置为true,可以实现多个文件的上传;通过访问Blob对象,可以 获取上传文件的类型,大小属性
单个文件: 创建一个"file"类型的<input>元素上传文件 <input type="file">
多个文件: 通过添加multiple属性,即可实现选择多个文件的功能。一个文件对应一个"file"对象,该对象有两个属 性,一个是"name",表示不包含路径的文件名称;另一个属性是lastModifinedDate,表示文件最后修改 的时 间。当使用file类型的input元素选择多个文件时,该元素中就包含多个"file"对象,从而形成 了"FileList"对象,即"file"对象的列表。
<form>
<fieldset>
<legend>选择单个文件上传</legend>
<input type="file" name="singleFile"/>
</fieldset>
<fieldset>
<legend>选择多个文件上传</legend>
<input type="file" name="singleFiles" multiple="multiple"/><!-- multiple的值true,不支持 -->
</fieldset>
</form>
1>通过Blob窗口获取文件的类型与大小
Blob表示二进制数据块,Blob接口中提供了一个slice方法,通过该方法可以访问指定长度与类型的字节内部数据块。该接口提供两个属性:一个是"size",表示返回数据块的大小;另一个"type",表示返回数据的MIME类型,如果不能确定数据块的类型,则返回一个空字符串。
<form>
<fieldset>
<legend>获取文件类型,大小</legend>
<input type="file" name="showFiles" οnchange="showFile(this.files)" multiple="multiple"/><!-- multiple的值true,不支持 -->
<span id="showSpan"></span>
</fieldset>
</form>
<script>
function showFile(f){
var strLi="<li>";
strLi=strLi+"<span>文件名称</span>";
strLi=strLi+"<span>文件类型</span>";
strLi=strLi+"<span>文件大小</span>";
strLi=strLi+"</li>";
for(i=0;i<f.length;i++){
var tempFile=f[i];
strLi=strLi+"<li>";
strLi=strLi+"<span>"+tempFile.name+"</span>";
strLi=strLi+"<span>"+tempFile.type+"</span>";
strLi=strLi+"<span>"+tempFile.size+"</span>";
strLi=strLi+"</li>";
}
document.getElementById("showSpan").innerHTML=strLi;
}
当触发onchange(this.files)时,this.files是html5的特性
2>通过类型过滤选择的文件
可以直接通过设置accpect="image/gif,image/png"()accpect="image/*"属性进行设置,页面中只能选择符合要求的 文件;(文件对象返回的类型 "image/xx" 类型的)
可以在选择文件后触发的 onchange事件中进行设置;
<!-- accept="image/gif,image/png" -->
<form>
<fieldset>
<legend>通过类型过滤</legend>
<input type="file" multiple="multiple" οnchange="filterFiles(this.files)" />
<span id="error"></span>
</fieldset>
</form>
<script>
function filterFiles(files){
var notMath=0;
var notMathFile;
var pattern=/image.*/;
var errorContent="";
errorContent=errorContent+"<li>出错文件</li>";
for(var j=0;j<files.length;j++){
var thisFile=files[j];
var thisType=thisFile.type;
if(!/image\/\w+/.test(pattern)){
notMath++;
errorContent=errorContent+"<li>"+"文件名称:"+files[j].name+"文件类型"+files[j].type+"</li>";
}
}
document.getElementById("error").innerHTML=errorContent;
}
2.使用FileReader读取文件
通过Blob接口可以获取文件的相关信息,如文件大小,名称,类型,但是如果需要读取浏览文件,则需要通过 FileReader接口。该接口不仅可以读取图片文件,还可以读取文本或二进制文件;同时,根据该接口提供的事 件与方法,可以动态观察文件读取时的详细状态。
1>FileReader 提供了一个异步的API,通过这个API可以从浏览器主程序中异步访问文件系统中的数据。因此, FileReader接口可以读取文件中的数据,并将读取的数据放入内存中;
当访问不同的文件时,必须重新调用FileReader接口的构造函数,因为每调用一次,FileReader接口 都将返回一个新的FileReader对象,只有这样,才能实现访问不同文件的数据。
FileReader接口中有许多常用的方法,用于读取和响应文件。如onabort事件触发时,需要调用abort 方法。
FileReader常用方法
方法名称 参数 功能描述 使用说明
readAsBinaryString() file 以二进制的方式读取文件 调用该方法时,将file对象返回的数据块,作 为一个二进制字符串的形式,分块读入内存中
readAsArrayBuffer file 以数据缓冲的方法读取文件内容 调用该方法时,将file对象返回的数据字节数, 以数据缓冲的方式读入内存中
readAsDataURL file 以数据URL的方式读取文件内容 调用该方法时,将file对象返回的数据块,以一 串数据URL字符的形式展示在页面中,这种方 法一般读取数据块较小的文件
readAsText file,encoding 以文本编码的方式读取文件内容 调用方式时,其中的encoding参数表示文 本文件编码的方式,默认值为utf-8,即以utf- 8编码格式将获取的数据块按文本方式读入 内存
abort 无 读取数据中止时,将自动触发该方法 如果在读取文件数据过程中出现异常或错误 时,触发该方法,返回错误代码信息
FileReader常用事件
onloadstart 当读取数据开始时,触发该事件
onprogress 当正在读取数据时,触发该事件
onabort 当读取数据中止时,触发该事件
onerror 当读取数据失败时,触发该事件
onload 当读取数据成功时,触发该事件
onloadend 当请求操作成功时,无论操作是否成功,即将触发该事件
一个文件通过FileReader接口中的方法正常读取数据时,触发事件的先后顺序
onloadstart-->onprogress-->onload-->onloadend
》大部分的文件读取过程中都集中在onprogress事件中,该事件耗长最长;
》如果文件在读取的过程中出现异常或中止,那么onprogress事件将结束,直接触发onerror 或onabort 事件, 而不会触发onload事件;
》onload事件是文件读取成功时触发的,而onloadend虽然也是文件操作成功时触发,但是该事件不论是否成 功,都将触发。因此,想要正确获取文件数据,必须在onload事件中编写代码
》一旦通过FileReader读取文件,无论成功与失败,实例的result属性都会被填充,如果读取失败,则result为 null,否则即是读取的结果,绝大多数的程序都会成功读取文件的时候,抓取这个值。
<form action="">
<fieldset>
<legend>FileReader事件调用顺序</legend>
<input type="file" οnchange="progressFiles(this.files)"/>
<span id="progressStatus"></span>
</fieldset>
</form>
<script>
function progressFiles(files){
if(typeof FileReader=="undefined"){
alert("浏览器不支持FileReader对象");
return;
}
var index=1;
var strHtml="";
var tempFile=files[0];
var reader=new FileReader();
reader.readAsText(tempFile);
reader.οnlοadstart=function(e){
strHtml=strHtml+index+":"+"开始读取数据";
index=index+1;
}
reader.οnlοad=function(e){
strHtml=strHtml+index+":"+"数据读取成功";
index=index+1;
}
reader.οnprοgress=function(e){
strHtml=strHtml+index+":"+"正在读取数据...";
index=index+1;
}
reader.onloadend=function(e){
strHtml=strHtml+index+":"+"文件读取成功";
document.getElementById("progressStatus").innerHTML=strHtml;
}
}
</script>
2> readAsDataURL 预览图片
通过FileReader接口中的readAsDataURL()方法,可以通过API异步读取的文件数据,另存为数据URL,将该URL绑定<img>元素的"src"属性值,就可以实现图片文件预览的效果。
<form>
<fieldset>
<legend>readDataAsURL预览图片</legend>
<input type="file" id="previewImage" οnchange="preViewImg(this.files)" multiple="multiple">
<ul id="uploadFiles"></ul>
</fieldset>
</form>
<script>
function preViewImg(files){
if (typeof FileReader =="undefined" ){
alert("您的浏览器不支持FileReader对象!");
return;
}
var strXmml="";
for(var i=0;i<files.length;i++){
var tempFile=files[i];
var reader=new FileReader();
reader.readAsDataURL(tempFile);
reader.οnlοad=function(e){
var result=this.result;
strXmml=strXmml+"<span>";//e.target.
strXmml=strXmml+"<img src=''"+this.result+"' alt=''/>";
strXmml=strXmml+"</span>"
document.getElementById("uploadFiles").innerHTML=strXmml;
}
}
}
</script>
3>通过readAsText方法读取文本文件
使用readAsText方法,可以将文件以文本编码的方式进行读取,即可以读取上传文件文本文件的内容:其实现与读取图片的方法基本类似,只是读取文件的方式不一样。
<form>
<fieldset>
<legend>使用readAsText读取文件</legend>
<input type="file" οnchange="watchFiles(this.files)"/>
<ul id="viewFile"></ul>
</fieldset>
</form>
<script>
function watchFiles(files){
if(typeof FileReader=="unfined"){
alert("浏览器不支持FileReader对象");
return;
}
var tempFile=files[0];
var reader=new FileReader();
reader.readAsText(tempFile,"gbk");
reader.οnlοad=function(e){
var result=this.result;
document.getElementById("viewFile").innerHTML="<span>"+result+"</span>";
}
}
</script>
3. 文件读取的错误与异常 FileError
文件读取过程中,不可避免的出现各种类型的错误与异常。而FileError对象可以获取这些错误与异常所产生的错 误代码,根据返回的错误代码,可以分析具体发生错误与异常的原因。
文件发生错误与异常的原因:
》访问某文件的过程中,该文件被移动或删除以及被其他应用程序并发式修改
》由于权限问题,无法读取文件的数据信息
》文件出于安全考虑,在读取文件时,返回一个无效的数据信息
》读取文件太大,超出URL网址的限制,将无法返回一个有效的数据结构信息
》在读取过程中,应用程序本身触发了中止读取文件abort()事件
在使用API异步读取文件时,一旦出现错误或异常,无法成功返回文件数据,可以使用FilterError接口。该接口主 要用于异步报告错误,当FileError对象无法返回数据时,将形成一个错误属性,而该属性是一个FileError对象, 通过该对象列出的错误与异常。
错误代码
NOT_FOUND_ERR 文件无法找到或原文件已被修改
SECURITY_ERR 出于安全考虑,无法获取数据文件
ABORT_ERR 触发了abort事件,中止文件读取过程
NOT_READABLE_ERR 由于权限原因,不能获取数据文件
ENCODING_ERR 读取的文件太大,超出读取地址的限制
<form action="">
<fieldset>
<legend>FileError</legend>
<input type="file" οnchange="catchException(this.files)"/>
</fieldset>
</form>
<script type="text/javascript">
function catchException(files){
if(typeof FileReader=="undefined"){
alert("浏览器不支持FileReader对象");
return;
}
var index=1;
var strHtml="";
var tempFile=files[0];
var reader=new FileReader();
reader.readAsText(tempFile);
reader.οnlοad=function(e){
alert("成功!!");
}
reader.οnerrοr=function(e){
alert("FileError"+e.target.error.code);
}
}