当我们使用邮箱添加附件时，会看到提示我们将文件放到相应区域，如图：
当我们将拖拽文件悬停在相应区域后会进一步提示我们，放下鼠标，如图：
下面我们将进一步的了解下此过程，并实现该效果。
首先我们先了解下关于文件拖拽的几个相关事件：
-obj.ondragenter = function (){}；当拖拽文件到“进入”obj区域时的事件处理函数。
-obj.ondragleave = function (){}；当拖拽文件到“离开”obj区域时的事件处理函数。
-obj.ondragover = function (){}；当拖拽文件到“悬停”obj区域时的事件处理函数，值得注意的一点是：若文件一直悬停在obj区域时，该事件会连续不断的持续的一直的触发着，和onmouseover并不一样。
-obj.ondrop = function (){}；当拖拽文件在obj区域“放下”时的事件处理函数。
思路（想法）：
当我们将一个文件退拽至浏览器窗口的时候，页面中有一个div1显示（原来的隐藏的）并提示我们，将文件拖拽至div1所在区域内。文件拖拽至div1区域的时候div1会提示我们将鼠标放下。
请看html布局：
/* 注意当页面加载完成后，此div1是隐藏起来的，我们并看不见 */
<div id="div1">请将文件拖拽至区域</div>
接下来我们简单的位div1设置下样式，让其垂直水平居中
#div1{
width: 200px; height: 200px;
border: 1px dashed #000;
position: absolute;
left: 50%; top: 50%;
margin: -100px 0 0 -100px;
line-height:200px;
font-size: 20px;
text-align: center;
display: none;
}
我们先来实现，当文件拖拽至浏览器窗口时，让div1显示。由于ondragover事件是连续触发的，这里我们的思路是利用一个定时器来阻止让div消失即可。当拖拽的文件离开浏览器窗口的时候，最后一次的定时器没有下一次的ondragover事件清除，所以此时div1就会被隐藏起来。
document.ondragover = function () {
oDiv.style.display = 'block';
clearInterval(timer);
timer = setTimeout(function(){
oDiv.style.display = 'none';
},200);
};
当拖拽的文件进入div1区域时，让其的inerHTML改变为“释放鼠标”。
oDiv.ondragenter = function (){
oDiv.innerHTML = '释放鼠标';
};
当拖拽的文件离开div1区域时，让其的innerHTML改成原来的“请将文件拖拽至区域”。
oDiv.ondragleave = function (){
oDiv.innerHTML = '请将文件拖拽至区域';
};
下面我们来实现，如何获取拖拽文件的信息及内容
首先我们应明确一点，让拖拽文件在div1上释放时，会“先”一直触发着oDiv.ondragover事件，我们要想触发oDiv.ondrop事件，就必须先阻止oDiv.ondragover事件。
oDiv.ondragover = function (){
return false;
};
接下来我们就让拖拽的文件在div1区域释放，需要注意：
1）浏览器会默认的帮我们自动打开文件，所以我们这里也需要来阻止浏览的默认事件。
2）当拖拽的文件在div1区域释放时，会有一个事件对象（ev）来记录相关信息，我们需要做的就是从ev中获取我们需要的信息即可。
oDiv.ondrop = function (ev){
/*ev.dataTransfer.files是一个数组记录着事件的相关信息，
当拖拽两个文件时该数组中就有两项内容，其length为2 */
var oFile = ev.dataTransfer.files[0];
//new FileReader专门一个读取文件的对象
var reader = new FileReader();
//两个参数一个是文件名称，第二个为编码格式
reader.readAsText(oFile,'utf-8');
//当页面读取完成后
reader.onload = function (){
alert(reader.result);
};
return false;
};
至此一个初级功能的html5拖拽上传完成
网友评论