文件File-重庆大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

文件File

File

File API在表单中的文件输入字段的基础上，又添加了一些直接访问文件信息的接口。HTML5在DOM中为文件输入元素添加了一个files集合。在通过文件输入字段选择了一或多个文件时，files集合中将包含一组File对象，每个File对象对应着一个文件。每个File对象都有下列只读属性

我们提供的服务有：网站建设、成都网站制作、微信公众号开发、网站优化、网站认证、华坪ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的华坪网站制作公司

name:本地文件系统中的文件名

size:文件的字节大小

type:字符串，文件的MIME类型

lastModifiedDate:字符串，文件上一次被修改的时间

通过侦听change事件并读取files集合就可以知道选择的每个文件的信息

文件File

【隐藏文件input】

现代浏览器支持隐藏掉默认的的文件输入框元素，使用自定义的界面来充当打开文件选择对话框的按钮。实现起来很简单，只需要使用样式display:none把原本的文件输入框隐藏掉，然后在需要的时候调用它的click()方法就行了

[注意]IE9-浏览器不支持

文件File

按钮

文件File

FileReader

File API的功能还不止于此，通过它提供的FileReader类型甚至还可以读取文件中的数据

【构造函数】

使用FileReader()构造函数来创建一个FileReader对象

var reader = new FileReader();

【属性】

error：表示在读取文件时发生的错误(只读)

readyState：表明FileReader对象的当前状态，值为状态常量中的一个(只读)

状态常量有以下三个

常量名      值    描述
EMPTY      0    还没有加载任何数据
LOADING    1    数据正在被加载
DONE       2    已完成全部的读取请求

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事件

文件File

由于种种原因无法读取文件，就会触发error事件。触发error事件时，相关的信息将保存到FileReader的error属性中。这个属性中将保存一个对象，该对象只有一个属性code，即错误码。这个错误码是1表示未找到文件，是2表示安全性错误，是3表示读取中断，是4表示文件不可读，是5表示编码错误

reader.onerror = function(){
    output.innerHTML = "Could not read file, error code is " + reader.error.code;
};

如果想中断读取过程，可以调用abort()方法，这样就会触发abort事件

在触发load、error或abort事件后，会触发另一个事件loadend。loadend事件发生就意味着已经读取完整个文件，或者读取时发生了错误，或者读取过程被中断

缩略图

使用FileReader对象的readAsDataURL()方法完成对文件的读取，再通过File对象的type属性筛选出图片

文件File

选择图片

文件File

Blob URL

使用Blob URL，也可以用来显示缩略图

文件File

选择图片

文件File

文件内容

readAsText()可以以字符串形式读取并显示文件内容

文件File

选择文件

文件File

拖放选择

围绕读取文件信息，结合使用HTML5拖放API和文件API，能够创造出令人瞩目的用户界面：在页面上创建了自定义的放置目标之后，你可以从桌面上把文件拖放到该目标。与拖放一张图片或者一个链接类似，从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在event.dataTransfer.files中读取到被放置的文件，当然此时它是一个File对象，与通过文件输入字段取得的File对象一样

[注意]IE9-浏览器不支持event.dataTransfer

从电脑上选择一个图片文件，并拖放到网页中指定区域，图片缩略图将显示到网页上

文件File

请将图片文件拖放到该区域内

文件File

文件进度

使用onprogress事件的loaded和total属性，可以实现文件进度显示

文件File

选择文件

文件File

文件上传

方法一：使用表单提交实现文件上传

文件上传最基本的方法是使用HTML表单选择本地文件进行上传，在form表单中通过标记选择本地文件。并且，必须在

元素中将enctype设置为"multipart/form-data"，将method设置为"post"

另外，需要在表单中设置一个hidden类型的input框，其中name值为MAX_FILE_SIZE的隐藏值域，通过设置其value值限制上传文件的大小

方法二：使用FormData实现文件上传

创建一个FormData()对象，通过它调用append()方法并传入相应的File对象作为参数。然后，再把FormData对象传递给XHR的send()方法

[注意]IE9-浏览器不支持使用FormData()上传文件

文件File

新闻中心

File

FileReader

缩略图

Blob URL

文件内容

拖放选择

文件进度

文件上传

删除文件

其他资讯