HTML5拖拽本地文件

<script>
/*
DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：
ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。
*/

</script>

<div id="div"></div>
<div id="info"></div>

<script>
/*
1.拖放（drag/drop）
2.拖放开始
ondragstart:调用了一个函数
drag(event),规定了被拖动的数据
3.设置拖动数据：
setData():设置被拖动数据类型和值
4.放入位置
ondragover:事件规定在何处放置拖动的数据
5.放置
ondrop:当放置被拖动数据是，触发的事件

*/

var $ = function(select){return document.querySelector(select)};
window.onload = function(){
var div = $('#div');
var info = $('#info');

div.ondragover = function(e){
e.preventDefault()//阻止默认事件
}

div.ondrop = function(e){
e.preventDefault()//阻止默认事件
showInfo(e)//显示信息
var f = e.dataTransfer.files[0];//获取信息
var file = new FileReader()//新建FileReader  用来读取文件
//文件读取完成后
file.onload = function(e){
div.innerHTML = "<img src=\""+file.result+"\">"
};
file.readAsDataURL(f);//读取地址
}
//获取拖动元素的信息
function showInfo(obj){
var s = "";
for(var k in obj){
s += k + ':' + obj[k] + '<br/>'
}
info.innerHTML = s;
}
}

</script>