您可以通过使用一个普通的<input type=”file”>开始,然后循序渐进地提高。HTML5 Drag&Drop支持特征检测,如果存在的话就使用<div>替换<input>,那就是您的drag图像目标了。当图像被drag到目标的时候,使用File Reader API来显示一个指甲盖大小的图像。您可以看一下Remy Sharp的demo()。
还有很多写文件和操作文件系统的规范,不过这些对目前的跨浏览器应用来说还不太够:
W3C文件API:()非常基础的介绍。
开发文件系统API:()HTML5 Rocks文章,(仅限Chrome)。
Feature-detecting, progressive enhancement and upgrade messages(特征检测,渐进式增强和消息通知)诚然,在没有那些奇幻的API的时候,大家总是试图使用渐进式增强和HTML语义的方法让网站照常工作。然而有时候却不能这样,例如Paul Neaver的《HTML5变成玩具》中,如果gUM和WebGL现在不存在的话,其网站不能有什么补救措施了,整个网站的核心都没了。
在这样的情况下有两种典型的惯例:要么是显示一条消息说“你的浏览器太垃圾了,塞油哪啦”或者说“你必须用Chrome6/Firefox 4/Opera10等[插入能支持你应用的浏览器]才能访问”。第一种方法又没用又粗鲁,没有建议和补救措施;第二种方法是个临时办法,因为六个月之内所有浏览器可能都能支持你现在使用的技术了,让你在网站上留下的信息过时:例如您写的解决方案是建议使用Firefox4来访问,可是半年后用户安装着Firefox7回来访问你的页面了,这可就真的没救了。
如果您真的不能使用渐进式增强,那么就用新型的HTML 5 Please API吧()。这是Jon Neal,Divya Manian和其他几位大虾创作的。通过使用它,可以先查询caniuse.com然后返回一个最新(能支持你的新特性的)的浏览器版本列表。
如果您已经做了一个需要Canvas或WebSQL DB技术的DEMO或者网站,恐怕你已经处在一个这样的尴尬境地了:您只是在告诉访问者们他们的浏览器不咋地。但是您不能只推荐他们使用一个能支持这些特性的浏览器来补救,例如“找个支持WebRTC性能的浏览器再来吧”,这样对于大家都没啥效果。
HTML5 Please API把开发人员的语言(和特性)翻译成用户能理解的语言(浏览器)。通过调用这个API你就可以得到一些HTML返回值来告诉访问者,或者返回一个带有相关数据的JSON对象(包括浏览器Logo及下载介绍等信息)。这样您可以根据不同的客户来显示不同的补救信息了。
使用这种方式最令人欣慰的是:如果所有新特性在客户当前浏览器的升级版都能支持的情况下,Please API值建议访客对浏览器升级,而不是让访客单纯为了访问你这个页面而更换浏览器。效果图如下:
结束语:
正如您所看到的,大量的令人惊喜的新技术正在接踵而至,您着手研究上述某项技术的时候恐怕又要担心更新鲜的技术到来了吧。希望您开发得愉快,请记得让您所开发的应用在尽可能多的浏览器上面测试一下。
———————————————————————————————
原文作者:Bruce Lawson2012年3月19日
图片整理:Rob Winter ;HTML5阐述: Mike Brennan
原文地址:
关于Bruce Lawson :支持Opera开放标准,专注于HTML5,窗口小部件和接入性。他是一位HTML5专家,与Remy Sharp共同编写了《Introducing HTML5》。他的个人网站: