文件File


  File API在表单中的文件输入字段的基础上,又添加了一些直接访问文件信息的接口。HTML5在DOM中为文件输入元素添加了一个files集合。在通过文件输入字段选择了一或多个文件时,files集合中将包含一组File对象,每个File对象对应着一个文件。每个File对象都有下列只读属性  name:本地文件系统中的文件名  size:文件的字节大小  type:字符串,文件的MIME类型  lastModifiedDate:字符串,文件上一次被修改的时间  通过侦听change事件并读取files集合就可以知道选择的每个文件的信息【隐藏文件input】  现代浏览器支持隐藏掉默认的的文件输入框元素,使用自定义的界面来充当打开文件选择对话框的按钮。实现起来很简单,只需要使用样式display:none把原本的文件输入框隐藏掉,然后在需要的时候调用它的click()方法就行了  [注意]IE9-浏览器不支持  File API的功能还不止于此,通过它提供的FileReader类型甚至还可以读取文件中的数据【构造函数】  使用FileReader()构造函数来创建一个FileReader对象【属性】  error:表示在读取文件时发生的错误(只读)  readyState:表明FileReader对象的当前状态,值为状态常量中的一个(只读)  状态常量有以下三个  result:表示读取到的文件内容,这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的(只读)【方法】  FileReader类型实现的是一种异步文件读取机制。可以把FileReader想象成XMLHttpRequest,区别只是它读取的是文件系统,而不是远程服务器。为了读取文件中的数据,FileReader提供了如下几个方法  abort():中止该读取操作  readAsText(file或Blob,encoding):以纯文本形式读取File或Blob对象的内容,将读取到的文本保存在result属性中。第二个参数(可选)用于指定编码类型,默认为UTF-8  readAsDataURL(file或Blob):读取File或Blob对象的内容,并将文件以数据URI(进行Base64编码)的形式保存在result属性中  readAsBinaryString(file或Blob):读取File或Blob对象的内容,并将一个字符串保存在result属性中,字符串中的每个字符表示一字节  readAsArrayBuffer(file或Blob):读取File或Blob对象的内容,并将一个包含文件内容的ArrayBuffer保存在result属性中  [注意]IE浏览器不支持readAsBinaryString()方法  这些读取文件的方法为灵活地处理文件数据提供了极大便利。例如,可以读取图像文件并将其保存为数据URI,以便将其显示给用户,或者为了解析方便,可以将文件读取为文本形式【事件】  由于读取过程是异步的,因此FileReader也提供了几个事件  onabort:当读取操作被中止时调用  onerror:当读取操作发生错误时调用  onload:当读取操作成功完成时调用  onloadend:当读取操作完成时调用,不管是成功还是失败。该处理程序在onload或者onerror之后调用  onloadstart:当读取操作将要开始之前调用  onprogress:在读取数据过程中周期性调用  在正常情况下,读取文件时,首先触发loadstart事件,此时的readyState为1,result为空  接着,每过50ms左右,就会触发一次progress事件,通过事件对象可以获得与XHR的progress事件相同的信息(属性):lengthComputable、loaded和total。另外,尽管可能没有包含全部数据,但每次progress事件中都可以通过FileReader的result属性读取到文件内容,readyState仍然是1  当文件读取完成时,触发load事件,此时的readyState为2,result为文件内容;如果发生了error事件,就不会发生load事件  由于种种原因无法读取文件,就会触发error事件。触发error事件时,相关的信息将保存到FileReader的error属性中。这个属性中将保存一个对象,该对象只有一个属性code,即错误码。这个错误码是1表示未找到文件,是2表示安全性错误,是3表示读取中断,是4表示文件不可读,是5表示编码错误  如果想中断读取过程,可以调用abort()方法,这样就会触发abort事件  在触发load、error或abort事件后,会触发另一个事件loadend。loadend事件发生就意味着已经读取完整个文件,或者读取时发生了错误,或者读取过程被中断  使用FileReader对象的readAsDataURL()方法完成对文件的读取,再通过File对象的type属性筛选出图片  使用Blob URL,也可以用来显示缩略图  readAsText()可以以字符串免费云主机域名形式读取并显示文件内容  围绕读取文件信息,结合使用HTML5拖放API和文件API,能够创造出令人瞩目的用户界面:在页面上创建了自定义的放置目标之后,你可以从桌面上把文件拖放到该目标。与拖放一张图片或者一个链接类似,从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在event.dataTransfer.files中读取到被放置的文件,当然此时它是一个File对象,与通过文件输入字段取得的File对象一样  [注意]IE9-浏览器不支持event.dataTransfer  从电脑上选择一个图片文件,并拖放到网页中指定区域,图片缩略图将显示到网页上  使用onprogress事件的loaded和total属性,可以实现文件进度显示方法一:使用表单提交实现文件上传  文件上传最基本的方法是使用HTML表单选择本地文件进行上传,在form表单中通过标记选择本地文件。并且,必须在  另外,需要在方法二:使用FormData实现文件上传  创建一个FormData()对象,通过它调用append()方法并传入相应的File对象作为参数。然后,再把FormData对象传递给XHR的send()方法  [注意]IE9-浏览器不支持使用FormData()上传文件方法三:使用File API实现文件上传  通过File API传送二进制文件  [注意]IE9-浏览器不支持  最后,提一个小知识点,使用控件的value值置空,但第二种方法IE10-浏览器不支持好的

相关推荐: 如何快速批量查询域名备案信息?

这篇文章给大家分享的是快速批量查询域名备案信息的方法,相信大部分人都还没学会这个技能,为了让大家学会,给大家总结了以下内容,话不多说,一起往下看吧。快速-准确:当我们使用ICP备案信息查询系统查询域名备案的时候会发现,那边返回的备案信息是非常的缓慢。有时候甚至…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 01/26 22:08
下一篇 01/26 22:08