html5-文件

最新推荐文章于 2021-06-02 19:08:37 发布

nicole88_

最新推荐文章于 2021-06-02 19:08:37 发布

阅读量411

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/u011587301/article/details/51015694

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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);
		
	}
	
	
}

nicole88_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5-文件

html5---文件在元素新添一个multiple属性，设置为true,可以实现多个文件的上传；通过访问Blob对象，可以获取上传文件的类型，大小属性单个文件：创建一个"file"类型的元素上传文件多个文件：通过添加multiple属性，即可实现选择多
复制链接

扫一扫