JavaScriptFileAPI实现文件上传预览资源-CSDN下载

78 浏览量 2020-10-22 21:39:29 上传评论收藏 117KB PDF 举报

资源推荐

资源详情

资源评论

JavaScript File API实现文件上传预览实现文件上传预览

主要为大家介绍了JavaScript File API实现文件上传预览，File API将极大地方便 Web 端的文件上传等操作，本

文将介绍 File API的概况，并用两个实例展示File API的应用，感兴趣的小伙伴们可以参考一下

一、概述一、概述

以往对于基于浏览器的应用而言，访问本地文件都是一件头疼的事情。虽然伴随着 Web 2.0 应用技术的不断发展，JavaScript

正在扮演越来越重要的角色，但是出于安全性的考虑，JavaScript 一直是无法访问本地文件的。于是，为了在浏览器中能够实

现诸如拖拽并上传本地文件这样的功能，我们就不得不求助于特定浏览器所提供的各种技术了。比如对于 IE，我们需要通过

ActiveX 控件来获取对本地文件的访问能力，而对于 Firefox，同样也要借助插件开发。由于不同浏览器的技术实现不尽相同，

为了让程序能够支持多浏览器，我们的程序就会变得十分复杂而难于维护。不过现在，这一切都因为 File API 的出现而得到了

彻底的改变。

File API 是 Mozilla 向 W3C 提交的一个草案，旨在推出一套标准的 JavaScript API，其基本功能是实现用 JavaScript 对本地

文件进行操作。出于安全性的考虑，该 API 只对本地文件提供有限的访问。有了它，我们就可以很轻松的用纯 JavaScript 来

实现本地文件的读取和上传了。目前，FireFox 3.6 是最先支持这一功能的浏览器。除此以外，最新版本的 Google Chrome 浏

览器和 Safari 浏览器也有相应的支持。File API 有望成为 W3C 目前正在制定的未来 HTML 5 规范当中的一部分。

二、二、File API 概览概览

File API 由一组 JavaScript 对象以及事件构成。赋予开发人员操作在 <input type=”file” … /> 文件选择控件中选定文件的能

力。图 1 展示了 File API 所有的 JavaScript 的组合关系。

类型 FileList 包含一组 File 对象。通常 FileList 对象可以从表单中的文件域（<input type=”file” .../>）中拿取。Blob 对象代表

浏览器所能读取的一组原始二进制流。Blob 对象中，属性 size 表示流的大小。函数 slice() 可以将一个长的 Blob 对象分割成

小块。File 对象继承自 Blob 对象，在 Blob 对象基础上增加了和 File 相关的属性。其中，属性 name 表示文件的名字，这个名

字去掉了文件的路径信息，而只保留了文件名。属性 type 表示文件的 MIME 类型。属性 urn 则代表这个文件的 URN 信息。

为完成文件读取的操作，一个 FileReader 对象实例会关联 File 或 Blob 对象，并提供三种不同的文件读取函数以及 6 种事

件。

文件读取函数具体内容：文件读取函数具体内容：

readAsBinaryString() 读取文件内容，读取结果为一个 binary string。文件每一个 byte 会被表示为一个 [0..255] 区间内的整

数。函数接受一个 File 对象作为参数。

readAsText() 读取文件内容，读取结果为一串代表文件内容的文本。函数接受一个 File 对象以及文本编码名称作为参数。

readAsDataURL 读取文件内容，读取结果为一个 data: 的 URL。DataURL 由 RFC2397 定义。

文件读取事件具体内容：文件读取事件具体内容：

事件名称事件说明

Onloadstart 文件读取开始时触发。

Progress 当读取进行中时定时触发。事件参数中会含有已读取总数据量。

Abort 当读取被中止时触发。

Error 当读取出错时触发。

Load 当读取成功完成时触发。

Loadend 当读取完成时，无论成功或者失败都会触发。

三、三、File API 简单示例简单示例

接下来我们用一个简单的例子展示 File API 的基本用法。这个示例包含两个代码文件，index.html 包含 Web 端的 HTML 代码

和处理上传的 JavaScript 代码；upload.jsp 包含服务器端接收上传文件的代码。请参见附件中的 sourcecode.zip。在这个例子

中，我们将显示一个传统的带有 File 选择域的表单。当用户选择文件，点击提交后，我们使用 File API 读取文件内容，并通

过 XMLHttpRequest 对象，用 Ajax 的方式将文件上传到服务器上。图 2 展示了运行中的演示截图。

我们逐步展示其中的代码。清单 1 给出了代码的 HTML 部分。

清单清单 1 示例代码的示例代码的 HTML 部分部分

<body>

<h1>File API Demo</h1>

<p>

<form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data"

action="javascript: uploadAndSubmit();">

<p>Upload File: <input type="file" name="file" /></p>

<p><input type="submit" value="Submit" /></p>

</form>

<div>Progessing (in Bytes): <span id="bytesRead">

</span> / <span id="bytesTotal"></span>

</div>

</p>

</body>

可以看到，我们用普通的 <form> 标签来包含一个传统的 <input type=”file” … /> 元素。在 <form> 中还有一个 submit 元素。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38732519

粉丝: 2

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip