html本地文件拖放,如何使用HTML5进行文件拖放

实现将文件从桌面直接拖放到浏览器中是web应用开发的终极目标之一,本文作为接下来四篇文章的第一篇将解决以下问题:

1.实现将一个文件拖放到一个页面元素上

2.在JavaScript中分析拖放的文件

3.在客户端加载和解析该文件

4.使用XMLHttpRequest2异步上传该文件

5.以图形的方式显示上传进度条

6.使用渐进增强(Progressive Enhancement)的思维来保证文件上传操作可以在任何浏览器上进行(对IE6的粉丝来说这是个好消息)

7.使用简单的JavaScript编码,不需要任何库

关于浏览器支持

开始之前,说明一下,因为本教程引用了许多最新的HTML5技术,所以可能支持度不同。下面的代码现在可以运行,但可能未来APIs接口有变或浏览器升级会造成影响。

最近发布的Firefox和Chrome版本支持所有的特性并能完美运行

Opera可以在JavaScript中解析文件,但是通过拖放文件并用XMLHttpRequest2进行上传现在还没实现

IE和桌面版的Safari不支持本文设计的任何APIs

Apple关闭了iPhone和iPad上Safari的通过HTML上传文件的表单。有人知道为什么吗?

最后,注意理解我这些代码中的基本概念,如果要在产品中使用还需要做仔细的检查。

HTML和CSS

在这里,我们写了一个标准的文件类型的输入表单,唯一属于HTML5特性的属性是“multiple”,它可以允许用户选择多个文件。

我们将把文件上传到用PHP编写的服务端,当然你也可以选择其他任何技术来实现服务端,但这里的代码都基本相同。MAX_FILE_SIZE这个隐藏属性的值设置为300,000个字节,是PHP中用来在客户端防止用户上传过大的文件。

0818b9ca8b590ca3270a3433284dd417.png

ID为filedrag的层用来作为文件拖放的目标位置,在CSS中默认将其隐藏,但如果当前浏览器支持拖放功能时,则在使用JavaScript将其显示。

0818b9ca8b590ca3270a3433284dd417.png

我们还需要定义一个 .hover类,用在当用户把文件拖上来时改变层的样式。在这种状态下浏览器不会自动加上a :hover这个类,但是当事件产生时,我们可以通过JavaScript来完成。

文件API

W3C File API 提供了许多对象,我们将用到:

FileList: 表示所选文件的列表

File: 表示单个文件

FileReader:允许使用JavaScript来读取和使用文件的接口

0818b9ca8b590ca3270a3433284dd417.png

编写JavaScript事件

是时候开始编写JavaScript了。因为我们没有使用JavaScript的类库,所以为了方便,我们有必要编写两个辅助的方法:通过ID寻找元素和输出信息。

0818b9ca8b590ca3270a3433284dd417.png

现在我们需要确定File API可用并且调用Init()方法。

0818b9ca8b590ca3270a3433284dd417.png

Init()方法:

1.为文件输入表单增加一个名为“change”的事件监听器

2.将ID为filedrag的层设为可见

3.为ID为filedrag的层增加样式变化事件监听器“dragover”和“dragleave”

4.为ID为filedrag的层增加名为“drop”的事件监听器

5.隐藏提交按钮——在对所选文件进行解析和上传时它是不必要的

当然,如果浏览器支持拖放文件,你也可以隐藏文件输入表单。我个人而言,更喜欢两种方式都使用,这样可以避免因为拖放所带来的一些可用性问题。对XMLHttpRequest.upload的检查是为了避免在Opera中出现问题。Opera支持FileList、File和FileReader接口,但不支持拖放事件和XMLHttpRequest2。因此,Opera能显示文件信息,但却不能做到显示ID为filedrag的层和隐藏提交按钮。

文件拖放后的样式变化

很少人有在浏览器中拖放文件的经历。实际上,有经验的web用户也不太关心文件拖放是否可能。因此,我们用一个层来提醒用户“把文件拖放到这里”(“drop files here”),更进一步,当一个文件已经拖放到指定位置后,我们还需要通过改变ID为filedrag的层的样式来进行提醒。

0818b9ca8b590ca3270a3433284dd417.png

分析拖放或选择后的文件

我们用同一个方法FileSelectHandler()来处理一个或多个文件,而不用关心文件是通过文件输入表单的“Browse”来选择,还是直接把文件拖放到ID为filedrag的层上。

0818b9ca8b590ca3270a3433284dd417.png

方法说明:

1.调用FileDragHover()方法来移除悬停(hover)样式和取消浏览器事件。这是必不可少的,否则浏览器会尝试显示这个文件。

2.获取一个FileList对象。这个对象不是从文件输入表单获取(如:e.target.files)就是从ID为filedrag的层上(如:e.dataTransfer.files)。

3.最后,遍历FileList并将每一个File对象作为ParseFile()的参数进行调用

0818b9ca8b590ca3270a3433284dd417.png

上面这个方法用来输出文件信息,用的是File对象中的三个主要的只读属性:

.name: 文件名(不包括路径)

.type: 文件MIME类型, 如: image/jpeg, text/plain, 等等

.size: 文件大小,单位字节

这是实例页面,你需要用Firefox, Chrome, 或Opera (不支持拖放)来访问,你也可以点击这里下载代码实例。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值