HTML5本地资源拖放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地拖放</title>
<style>
#imgContainer{
background-color: #cccccc;
width:500px;
height:500px;
}
</style>
<script src="app1.js"></script>
</head>
<body>
<div id="imgContainer"></div>
<div id="msg"></div>
</body>
</html>
app1.js
msgDiv = document.getElementById("msg");
imgContainer.ondragover = function (e) {
e.preventDefault();
}
imgContainer.ondrop = function (e) {
e.preventDefault();
var f = e.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.readAsDataURL(f);
fileReader.onload = function (e) {
showObj(e);
imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"
}
}
}
function showObj(obj) {
var s = "";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>";
}
msgDiv.innerHTML = s;
}
