玩转HTML5应用实战:灵活拖拉文件
在HTML5中,出现了众多的新的技术和特性,而本文将介绍的是目前HTML5标准中,对如何将用户客户端的文件拖拉到浏览器这一特性进行初步的讲解。在HTML5中的标准中,提到了希望能在新一代浏览器中,支持用户直接将客户端桌面的文件拖放到浏览器中,甚至鼓励做更多的
工作(比如上传文件)。这篇文章将分如下几个方面进行初步的分析和探讨:如何将文件拖放到
web页面中在Javascript中分析拖拽文件
在客户端装载和解析文件
使用XMLHttpRequest2异步上传文件到服务端上传时显示一个进度条
改进上传文件的表单,甚至支持IE6,以让在各浏览器中可以兼容运行。并介绍如何单单只用
Javascript实现,不用任何框架。目前浏览器对文件拖拉的支持
在我们开始讲解前,我们先要说明下,由于
HTML5的标准最终版本还没完全发布,各浏览器也不是完全都对所有功能进行支持,所以本文的程序有可能在今后的各浏览器中不能完全运行成功,但至少在本文发表时,会对以下浏览器在如下各方面进行支持。1)目前
程序能在所有的Firefox和Chrome的浏览器中很好的运行。
2)Opera浏览器能解通过Javascript去解析文件,但不支持文件的拖拉到浏览器中及使用XMLHttpRequest2去上传文件。
3)IE和Safari不支持任何本文提到的API和新特性。4)Apple不允许在iOS
系统中使用HTML表单上传文件。下面,就让我们开始
学习之旅吧。HTML和CSS
我们先来看下上传文件的表单,代码如下:
PHP”METHOD=”POST”ENCTYPE=”MULTIPART form-data”>