HTML5与Google Gears实现拖拽上传详解

"本文主要介绍了如何使用HTML5的拖拽上传功能，并结合Google Gears在Chrome浏览器中实现文件上传。提供了必要的技术背景、支持情况以及实现步骤，还提供了一个名为UpLoadFileXHR的封装类，简化了实际开发中的实现过程。" 在HTML5中，拖拽上传功能允许用户直接通过拖放操作将本地文件上传到网站，提升了用户体验。这一特性依赖于两个关键的浏览器支持： 1. **拖放(Drag and Drop)事件**：浏览器需要支持`drop`事件，以便在用户将文件从桌面或其他窗口拖放到网页指定区域时，能够捕获并处理这些事件。通过监听`dragenter`、`dragover`和`drop`事件，开发者可以控制拖放操作的行为，例如阻止默认的浏览器行为（如打开文件）并获取被拖放的文件对象。 2. **XMLHttpRequest的二进制数据发送**：为了将文件数据发送到服务器，浏览器的XMLHttpRequest对象需要支持发送二进制数据。Firefox 3.6及更高版本原生支持`sendAsBinary`方法，而Chrome虽然支持拖放事件，但不支持`sendAsBinary`，这时就需要借助第三方库如Google Gears来模拟这个功能。 **实现拖拽上传的步骤**： 1. **绑定事件**：首先，需要在HTML元素上绑定`dragenter`、`dragover`和`drop`事件监听器，通常是在一个可接受文件的容器元素上，如`<div>`或`<input type="file">`。 2. **获取File对象**：在`drop`事件处理函数中，可以通过`event.dataTransfer.files`获取拖放的文件列表，每个文件都是一个`File`对象，包含了文件的基本信息和数据。 3. **转换二进制数据**：然后，需要将`File`对象转化为二进制数据，以便通过HTTP请求发送到服务器。在Firefox中可以直接使用`sendAsBinary`，而在Chrome中，可以使用`FileReader`的`readAsArrayBuffer`方法，再转换成适合发送的数据格式。 4. **发送POST请求**：最后，通过XMLHttpRequest创建一个POST请求，将二进制数据发送到服务器。在Chrome中，可能需要使用`FormData`对象和`XMLHttpRequest`的`send`方法，将数据以`Blob`或`ArrayBuffer`的形式发送。 为了简化这一过程，文章提供了一个名为`UpLoadFileXHR`的封装类，该类处理了上述步骤中的大部分工作。开发者只需要实例化这个类，并设置相应的参数，如上传的URL、文件字段名等，就能实现拖拽文件上传的功能。此外，`UpLoadFileXHR`还提供了错误处理、上传开始、进度更新和状态变化的回调函数，方便进行状态监控和异常处理。 HTML5的拖拽上传功能结合Google Gears，为开发者提供了一种高效且用户友好的文件上传方式，尤其是在Firefox和早期版本的Chrome浏览器中。通过封装类，开发者可以快速集成这一功能，提高网站或应用的交互性。