这是一份很简单的作业，由于百度当时没找到，就自己写了一下，命名不是很机智只是为了写的快且好懂，使用只需要将桌面的图片拖拉进里面就直接生成一个新的带相框的图片，代码很短好理解。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#fileCheck {
width: 300px;
height: 100px;
border: 1px dashed;
margin: 20px;
}
</style>
</head>
<body>
<h3>HTML5拖放API之图片相框</h3>
<hr />
<div id="fileCheck" ondragover="allowDrop(event)" ondrop="drop(event)">
请将文件拖放至此处。
</div>
<div id="status"></div>
</body>
<script>
//ondragover事件回调函数
function allowDrop(ev) {
//解禁当前元素为可放置被拖拽元素的区域
ev.preventDefault();
}
//ondrop事件回调函数
function drop(ev) {
//解禁当前元素为可放置被拖拽元素的区域
ev.preventDefault();
var newdiv=document.createElement("div");
newdiv.style.backgroundImage="url(image/photoframe.jpg)";
newdiv.style.width=500+"px";
newdiv.style.height=440+"px";
newdiv.style.position="relative";
document.getElementById('status').appendChild(newdiv);
var f0 = ev.dataTransfer.files[0];
//创建一个文件内容读取器——FileReader
var fr = new FileReader();
//读取文件中的内容 —— DataURL：一种特殊的URL地址，本身包含着所有的数据
fr.readAsDataURL(f0);
fr.onload=function () {
var img = new Image();
img.src = fr.result; //dataURL
img.style.width="310px";
img.style.height="250px";
img.style.position="absolute";
img.style.left=100+"px";
img.style.top=100+"px";
newdiv.appendChild(img);
}
}
</script>
</html>