小编给大家分享一下怎么使用HTML5 File接口在web页面上使用文件下载,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
在平桂等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、网站设计 网站设计制作按需规划网站,公司网站建设,企业网站建设,高端网站设计,成都全网营销推广,外贸网站建设,平桂网站建设费用合理。
File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容。接下来通过本文给大家介绍HTML5 File接口在web页面上使用文件下载功能,需要的的朋友参考下
File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容。
File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的DataTransfer对象。File对象是一种特殊的Blob,它能够在任何能够使用Blob的上下文中使用。
要在web页面中使用文件,通常需要涉及到的对象有:File对象,FileList对象,FileReader对象。
FileList对象
FileList来自于两个地方,分别是input元素的files属性以及drag and drop API(当拖动文件时,event.DataTransfer.files就是一个FileList对象)
<input id="fileItem" type="file"> var fileList = document.getElementById('fileItem').files
FileList对象的标准属性
length:这个一个只读属性,这个属性返回FileList对象中包含的File对象的长度。
FileList对象的标准方法
item(index):取得FileList对象中指定位置的File对象。它可以用数组索引的形式去简写
File对象
FileList对象的每一项都是File对象。File对象是一种特殊的Blob。
File对象的标准属性
1.lastModified:返回文件被修改的时间,这个时间是距离1970年1月1日0点0时0分经过的毫秒数。是一个只读属性
2.name:返回文件对象引用的文件的文件名,这是一个只读属性
3.type:返回文件对象引用的文件的文件类型,是MINE type,这个是一个只读属性。
4.size:返回文件对象引用的文件的文件大小,这个一个只读属性。
File对象的标准方法
没有给File对象单独定义方法,但是它有从Blob对象那儿继承来的方法。
FileReader对象
FileReader对象使web应用能够异步读取用户计算机上的文件。
FileReader()是一个构造函数,通过它可以创建一个新的FileReader对象。
var fileReader = new FileReader();
FileReader对象的标准属性
1.error:返回文件读取过程中发生的错误。
2.result:返回文件的内容,返回值得类型是String或者ArrayBuffer。这个属性只有在读取操作完成之后才是合法的。
3.readyState:返回读取操作当前的状态,可能的取值是0:还没有开始读取,1:正在读取,2:读取完成。
FileReader对象的标准方法
1.abort():中断读取操作。readyState的值变成2.
2.readAsArrayBuffer(Blob):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的ArrayBuffer。
3.readAsDataURL(Blob):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的URL,并且数据格式是base64编码的字符串
<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">
function previewFile() { var preview = document.querySelector('img'); var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.addEventListener("load", function () { preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } }
4.readAsText(Boob,encoding):读取指定的Blob,如一个File对象(File对象是一种特殊的Blob)。只要读取完成,readyState属性的值就会变为2,result属性是一个表示文件数据的文本字符串。第二个参数是可选的,它用于指定result属性中文本字符串的编码方式,默认为UTF-8。
FileReader对象的事件
1.abort:终止读取操作时触发。
2.error:读取操作过程中遇到错误时触发。
3.load:读取操作成功的完成时触发。
4.loadend:读取操作结束时触发。不能是读取成功还是读取失败。
5.loadStart:读取操作开始时触发。
6.process:读取过程中触发。
在web应用中使用文件
使用HTML5中的文件对象,可以访问选择的本地文件,并且读取这些文件中的内容。文件对象要么来自于input元素,要么来自于drag and drop接口。
通过input元素选择文件
<input type="file" id="input">
访问通过input选择的文件
var selectedFile = document.getElementById('input').files[0];
上述代码段一次只能选择一个文件,如果一次要选择多个文件,就需要给input元素添加一个multiple属性,并将multiple属性设置我true。在Gecko 1.9.2之前不支持一次选择多个文件。
通过drag and drop接口选择文件
关于drag and drop接口可以查看HTML5 DragEvent。
第一步:创建一个放置区域。一个普通的元素,如p,p等。
第二步:给放置区添加drop,dragenter,dragover事件处理程序。其中起关键作用的是drop事件处理程序。
下面是一个显示缩略图的例子:
<p id='dropbox' class='dropbox'></p> .dropbox{ border:solid 3px red; height:400px; width:auto; }
var dropbox; dropbox = document.getElementById("dropbox"); //注册事件处理程序 dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files); } function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /^image\//; if (!imageType.test(file.type)) { continue; } var img = document.createElement("img"); img.file = file; dropBox.appendChild(img); var reader = new FileReader(); reader.onload = function() { img.src = reader.result; }; reader.readAsDataURL(file); } }
看完了这篇文章,相信你对怎么使用HTML5 File接口在web页面上使用文件下载有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前题目:怎么使用HTML5File接口在web页面上使用文件下载
文章分享:https://www.cdcxhl.com/article44/pidehe.html
成都网站建设公司_创新互联,为您提供微信小程序、自适应网站、Google、网站维护、网站内链、服务器托管
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联