html拖动文件读取文件内容,HTML5新功能之文件拖拽上传

当我们使用邮箱添加附件时，会看到提示我们将文件放到相应区域，如图：

当我们将拖拽文件悬停在相应区域后会进一步提示我们，放下鼠标，如图：

下面我们将进一步的了解下此过程，并实现该效果。

首先我们先了解下关于文件拖拽的几个相关事件：

-obj.ondragenter = function (){}；当拖拽文件到“进入”obj区域时的事件处理函数。

-obj.ondragleave = function (){}；当拖拽文件到“离开”obj区域时的事件处理函数。

-obj.ondragover = function (){}；当拖拽文件到“悬停”obj区域时的事件处理函数，值得注意的一点是：若文件一直悬停在obj区域时，该事件会连续不断的持续的一直的触发着，和onmouseover并不一样。

-obj.ondrop = function (){}；当拖拽文件在obj区域“放下”时的事件处理函数。

思路(想法)：

当我们将一个文件退拽至浏览器窗口的时候，页面中有一个div1显示(原来的隐藏的)并提示我们，将文件拖拽至div1所在区域内。文件拖拽至div1区域的时候div1会提示我们将鼠标放下。

请看html布局：

/* 注意当页