<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>拖放上传</
title
>
<
style
>
#imgContainer{background:#ccc;width:500px;height:500px;}
</
style
>
</
head
>
<
body
>
<
p
id
=
"imgContainer"
></
p
>
<
p
id
=
"msg"
></
p
>
</
body
>
<
script
>
var imgContainer,msgp;
window.onload = function(e){
imgContainer = document.getElementById('imgContainer');
msgp = document.getElementById('msg');
imgContainer.ondragover = function(e){
e.preventDefault();
}
imgContainer.ondrop = function(e){
e.preventDefault();
var f = e.dataTransfer.files[0];
//这时已经获取到文件了,具体想要用第几个文件自己处理,发post请求后端处理就行了!
//下面是图片获取到之后显示在imgContainer中的流程
// var fileReader = new FileReader();
// fileReader.onload=function(){
// imgContainer.innerHTML = "<
img
src=\""+fileReader.result+"\">"
// }
// fileReader.readAsDataURL(f);
// showObj(e); //显示上传信息
// showObj(e.dataTransfer.files);
}
}
function showObj(obj){
var s = '';
for(var k in obj){s += k+":"+obj[k]+"<
br
/>";}
msgp.innerHTML = s;
}
</
script
>
</
html
>