html5 拖拽文件到页面实现上传
思路：监听拖拽区域的 drop 事件，阻止浏览器上的默认拖拽事件
参考:http://www.helloweba.com/view-blog-192.html
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="" alt="" height="100px" width="100px">
<script>
document.addEventListener("drop",preventDe);
document.addEventListener("dragleave",preventDe);
document.addEventListener("dragover",preventDe);
document.addEventListener("dragenter",preventDe);
function preventDe(e){
e.preventDefault();
}
document.addEventListener("drop",function(e){
e.preventDefault();
var file = e.dataTransfer.files[0];
//file.type; 文件类型
//file.name;文件名
//file.size; 文件大小 btye
var img = document.getElementsByTagName("img")[0];
var dataURL = URL.createObjectURL(file);
img.src = dataURL;
var formData = new FormData();
formData.append("file",file);
// 发送XHR
XHR.send(formData);
})
</script>
</body>
</html>
