对于基于浏览器的应用程序，访问本地文件是一件令人头疼的事情。通常，我们所能做的就是使用input type='file '标记上传文件。实现过程是：选择文件时，value属性保存用户指定的文件名；提交表单时，浏览器会将所选文件的内容发送到服务器，而不仅仅是发送文件名。然后获取服务器返回的地址并预览。

但是，如果有一天我们想上传一张图片，上传后预览，又想换另一张图片，那就必须先上传到服务器再预览。在网络缓慢的情况下，这确实令人沮丧。

所以有时候需要在上传到服务器之前进行预览，尤其是一些带有裁剪功能的需求，比如换新浪微博的头像。但是，目前我们只能借助插件来开发或使用flash。因为不同的浏览器有不同的技术实现，为了让程序支持多种浏览器，我们的程序会变得非常复杂和难以维护。幸运的是，我们现在有了文件应用编程接口。

通过听change事件，我们可以知道用户选择的文件，并添加一个files集合，该集合将包含文件对象，每个文件对象对应一个文件。它们都有以下只读属性：名称、大小、类型和上次修改日期。

以输入类型='file' name='file '为例，监控onchange并打印其文件对象：

由此，我们可以知道用户选择的文件格式、文件名和文件大小等一些信息。因此，我们可以很容易地验证所选的文档，并判断它们是否符合我们的一些要求。

此外，文件应用编程接口还提供文件阅读器类型来读取文件中的数据。

FileReader类型实现了类似于XMLHttpRequest的异步文件读取机制，但是它读取的是文件系统而不是远程服务器。并提供了几种阅读方法：

Readstext(文件，编码):以纯文本形式读取文件，并将读取的文本保存在result属性中。第二个参数用于指定编码类型，这是可选的。ReadAsDataURL(文件):读取的文件以数据URL的形式保存在结果属性中。ReadAsBinaryString(文件):读取文件并在结果属性中保存一个字符串。ReadAsArrayBuffer(文件):读取文件，并在结果属性中保存一个包含文件的人容量的ArrayBuffer。用上述方法分别读取同一个局部图片，将保存在结果属性中的信息打印出来，对比如下：

readAsText(文件，编码):

readAsDataURL(文件):

通过以上比较，我们发现这些读取文件的方法为灵活处理文件数据提供了极大的便利。例如，读取图像文件并将其保存为数据url可以用作上传前的预览功能。

因为读取过程是异步的，所以FileReader中有几个事件处理不同的情况：进度(是否读取了新数据)、erro(是否发生了错误)和load(是否读取了整个文件)。

如果由于各种原因无法读取文件，将会触发错误事件。当错误事件被触发时，属性代码(错误代码)将被保存在文件阅读器的错误属性中的对象中。

使用文件阅读器作为上传预览的示例：

HTML:

Class=' item _ label '上传照片：span style=' width: 100px高度： 100像素；border:1px固体# cccdisplay : inline-block ' img src=' http : # ' id=' uploadPreview ' style=' width : 100%；高度： 100%；/span输入类型=' file ' name=' file ' id=' PostFile ' style=' width :74 px；span id=' error _ text ' style=' display : none；提示/范围/标签avaScript:

文件。getelementbyid(' postFile ').onchange=function(){ var val=this。价值；var upLoadType=' .jpg .gif .bmp .png '；//['.jpg '，' .gif '，' .bmp '，' .png ']；//可上传的格式var文件ext=val。substr(val。LastIndexof(' . '))).toLowerCase()；//从字符串中抽出最后一次出现。之后的字符，并且转换成小写var结果=uploadtype。indexof(文件扩展名)；//查找后缀名是否符合条件，如果符合返回=0,如果不符合则返回负数；_ alertMsg=$(' # error _ text ')；读取器的var=新文件读取器()；如果(这个。文件。length===0){ return；} var oFile=this。文件[0]；//如果只有一个文件则只需要访问这个文件列表对象中的第一个元素如果。size/1024 100){ _ alertmsg。html(' font style=' color : blue '/font ').show()}；如果(结果0) { _alertMsg.html('请输入正确格式：' upLoadType).show()；} else { _ alertmsg。html(' font style=' color : blue '/font ').show()；};读者的。readasdataurl(oFile)；//开始在后台进行读取操作。当图像文件的所有内容加载后，他们转换成一个数据：网址，传递到装载回调函数中读者的。onload=函数(revit的){//当读取操作成功完成时调用文件。getelementbyid(' uploadPreview ').src=of Revent。目标。结果；};};效果以及返回的图片网址：

以上就是本文的全部内容，希望对大家的学习有所帮助。