前言:
此时看官们对“js读取file”大致比较讲究,兄弟们都想要学习一些“js读取file”的相关内容。那么小编也在网摘上网罗了一些有关“js读取file””的相关知识,希望我们能喜欢,你们一起来学习一下吧!前言
在如今的项目开发过程中,上传图片或者上传头像已经变成了非常常见的操作。一般的,都需要在向后台上传图片之前,在页面中预览一下用户选择的图片。上传头像只需要预览一张图片,如果是上传图片至相册功能,则需要预览用户选择的多张图片。这样的操作在H5页面中要如何实现呢?本文系统的教大家认识H5为我们提供的Files类和File类,这两个类在现代项目开发中起着举足轻重的作用。
一、HTML5为文件域新增的属性
HTML5为文件域新增了下列两个属性:
multiple,设置文件域是否可以同时选择多个要上传的文件。这是一个没有取值的放置性属性,书写在文件域的代码中就可以使用。accept,用于在文件域对本地文件进行选择时对文件类型进行筛选。该属性取值为MIME类型,以确定弹出的资源管理器只显示accept指定类型的文件。
同时HTML还规定,在项目中使用文件域,必须为文件域设置name属性。除此之外,一个表单若具备文件传递功能,必须将表单的enctype属性设置为multipart/form-data。
例如:想让用户通过文件域从本地资源管理器中选择多个图片,HTML代码如下所示。
<form method="get" action="uploadAvatar" enctype="multipart/form-data"> <input type="file" class="tx" name="file" multiple accept="image/jpeg" /></form>123
我们还要知道,无论使用JavaScript的DOM操作,还是jQuery的相关方法,都无法利用表单元素的value属性获得用户选择的文件地址。value属性只能得到一个包含文件全名的虚拟地址:
C:\fakepath\文件全名
我们可以从本地的C盘去进行查找,fakepath路径根本不存在。那么我们要怎样才能在页面中显示用户选择的图片呢?这就要用到Files类和File类了。
二、认识Files类1、如何创建Files类的实例
使用Files类必须先创建Files类的实例,创建格式如下所示。
var 实例名 = 文件域.files;
var files=document.querySelector(".tx").files; //变量files就是Files类的实例名alert(files); //[object FileList]2、Files类的属性length,返回Files类所包含的文件个数。3、Files类的方法item(index),返回Files类中所包含文件中索引值为index的文件。
item()方法也可以使用Files类实例名的下标来表示:files.item(0) 也可以写成 files[0]三、认识File类1、如何创建File类的实例
使用File类必须先创建File类的实例,创建格式如下所示。
var 实例名 = Files类的实例.item(index);
var file=document.querySelector(".tx").files.item(0); //变量file就是File类的实例名alert(file); //[object File]2、File类的属性name,返回文件的文件名。size,以字节(B)为单位返回文件的大小。type,返回文件的MIME类型名。lastModified,返回文件上一次修改的日期距离1970年1月1日的毫秒数。lastModifiedDate,返回文件上一次修改的日期。四、认识单页面文件的有效地址1、blob地址和base64地址
(1)这两类地址都可以在本页面内作为文件的有效地址,在其他页面无法使用。
(2)前端技术产生的这两类地址都无法在后台使用。
2、如何获得blob地址
var blobAddress = window.URL.createObjectURL(File实例 | Blob实例)
3、利用blob地址展示图片预览
例:页面中有一个文件域,同时还有一个用来预览图片的容器,HTML代码如下所示。
<input type="file" name="file" /> <div class="imgContainer"></div>12
原生JavaScript代码如下所示。
var fileNode=document.querySelector("input[type=file]");var imgContainer=document.querySelector(".imgContainer");fileNode.onchange=function(){ var file=this.files.item(0); var img=new Image(); img.src=URL.createObjectURL(file); img.width=60; img.height=60; imgContainer.appendChild(img);}五、FileReader类1、FileReader类的功能
FileReader类可以读取到File类实例所指代的文件的内容。要想获得用户所选文件的base64地址必须使用FileReader类。
2、创建FileReader类的实例
var fr=new FileReader();
3、FileReader类的方法readAsArrayBuffer(file):读取file文件的内容,并作为ArrayBuffer格式得到结果。readAsText(file,charset):按照指定的charset字符集以文本文件的形式读取file文件的内容。readAsBinaryString(file):以二进制字符串的形式读取文件。readAsDataURL(file):读取file文件并返回file文件的base64地址。4、FileReader类的属性result,在文件读取结束时返回指定方式读取文件的结果。5、FileReader类的事件loadStart:开始读取文件时触发该事件。progress:读取文件过程中触发该事件。load:当文件读取结束时触发该事件。
例1:读取文件(图片)并得到该文件的base64地址。
$(".file").addEventListener("input",function(){ var file=this.files.item(0); var fr=new FileReader(); fr.readAsDataURL(file); fr.onload=function(){ $(".tp").src=this.result; }})
例2:为文件的读取设置一个进度条。
<progress max="进度条的最大值" value="当前的读取进度"></progress>1
$(".file").addEventListener("input",function(){ var file=this.files.item(0); var fr=new FileReader(); fr.readAsBinaryString(file); fr.onloadstart=function(){ //当开始读取文件时 $(".pro").style.display="block"; } fr.onprogress=function(){ //读取文件过程中 var temp=(event.loaded/file.size)*100; $("progress").value=temp; $("progress+span").textContent=parseInt(temp*10)/10 + "%"; } fr.onload=function(){ //读取结束时 window.setTimeout(function(){ $(".pro").style.display="none"; },2000); }})六、Blob类1、Blob类的功能
实现一个新文件的创建,该类是File类的父类。
2、创建Blob类的实例
var blob=new Blob(Array,{ type:“MIME类型” })
参数:Array,数组,该数组用来指定创建文件的内容。
3、Blob类案例
例1:创建一个文本文件并另存为指定的本地路径。
$(".btn").addEventListener("click",function(){ var txt=$(".txt").value; var array=new Array(); array.push(txt); var blob=new Blob(array,{ type:"text/plain" }); var url=URL.createObjectURL(blob); var aNode=document.createElement("a"); aNode.href=url; aNode.download=""; aNode.click();})
例2:实现在线的HTML代码执行功能。
$(".btn").addEventListener("click",function(){ var codeContent=$(".code").textContent; var array=new Array(codeContent.replace(/\s+\</g,'\<').replace(/\>\s+/g,'\>')); var blob=new Blob(array,{ type:"text/html" }); var fr=new FileReader(); fr.readAsText(blob,'gb2312'); fr.onload=function(){ console.log(this.result); } var url=URL.createObjectURL(blob); $(".iframe").src=url;})总结
在HTML5的页面操作过程中,很多地方都可以用到Files类、File类、Bolb类。H5提供的这些类可以简化我们对文件的操作,结合后台功能,可以开发出多种多样的文件功能。
关于作者
小海前端,具有18年Web项目开发和前后台培训经验,在前端领域著有较为系统的培训教材,对Vue.js、微信小程序开发、uniApp、React等全栈开发领域都有较为深的造诣。入住今日头条,希望能够更多的结识Web开发领域的同仁,将Web开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。
标签: #js读取file