HTML 5应用实战 灵活拖拉文件.pdfVIP

这篇文章将分如下几个方面进行初步的分析和探讨： ◆ 如何将文件拖放到web页面中 ◆ 在Javascript中分析拖拽文件 ◆ 在客户端装载和解析文件 ◆ 使用 XMLHttpRequest2异步上传文件到服务端 ◆ 上传时显示一个进度条 ◆ 改进上传文件的表单，甚至支持IE6，以让在各浏览器中可以兼容运行。 ◆ 并介绍如何单单只用Javascript实现，不用任何框架。 目前浏览器对文件拖拉的支持 在我们开始讲解前，我们先要说明下，由于HTML5的标准最终版本还没完全发布，各 浏览器也不是完全都对所有功能进行支持，所以本文的程序有可能在今后的各浏览器中不能 完全运行成功，但至少在本文发表时，会对以下浏览器在如下各方面进行支持。 1) 目前程序能在所有的Firefox和Chrome的浏览器中很好的运行。 2)Opera浏览器能解通过Javascript去解析文件，但不支持文件的拖拉到浏览器中及 使用XMLHttpRequest2去上传文件。 3)IE和Safari不支持任何本文提到的API和新特性。 4)Apple不允许在iOS系统中使用HTML表单上传文件。 下面，就让我们开始学习之旅吧。 HTML CSS HTML CSS 和 HHTTMMLL CCSSSS 我们先来看下上传文件的表单，代码如下： form form 1 ffoorrmm id=upload action=upload.php method=POST enctype=multipart/form-data fieldset fieldset 2 ffiieellddsseett legend /legend legend /legend 3 lleeggeennddHTML File Upload//lleeggeenndd input input 4 iinnppuutt type=hidden id=MAX_FILE_SIZE name=MAX_FILE_SIZE / / value=300000 // div div 5 ddiivv label /label label /label 6 llaabbeell for=fileselectFiles to upload://llaabbeell input input 7 iinnppuutt type=file id=fileselect name=fileselect[] / / multiple=multiple // div /div div /div 8 ddiivv id=filedragor drop files here//ddiivv /div /div 9