功能要求： 使用HTML5拖放API相关技术，在网页上实现为指定图片自动生成图片相框的效果。用户通过拖拽可以将本地的图片文件放置到页面上指定区域，即可在页面上自动生成带有相框效果的图片展示。 实现效果图：
一、界面设计 1.使用<div>标签划分区域 1）本地文件放置区域 2）带有相框图片的展示区域
2.CSS文件辅助渲染样式 1）自定义外部样式表photoframe.css文件
二、相框自动生成功能的实现 1.可放置区域的实现
<div id="recycle" ondragover="allowDrop(event)" >请将图片拖放至此处</div> //ondragover事件回调函数 function allowDrop(ev) { //解禁当前元素为可放置被拖拽元素的区域 ev.preventDefault(); }2.生成带有相框的图片效果
<div id="recycle" ondragover="allowDrop(event)" ondrop="fileDrop(event)" > function fileDrop(e) { … //清空上一次图片内容 //获取从本地拖拽放置的文件对象数组files //使用for循环遍历同时被拖拽并放置到指定区域的所有文件 }3.显示图片文件信息
//获取当前文件的最新修改日期 var lastModified = f.lastModifiedDate; //修改当前文件的最新修改日期的描述格式 var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a'; //设置图片下方状态信息栏描述内容 status.innerHTML = '<strong>' + f.name + '</strong> (' + (f.type || 'n/a') + ')<br>大小：' + f.size + '字节<br>修改时间：' + lastModifiedStr;三、完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5拖放API之图片相框效果</title> <link rel="stylesheet" href="css/photoframe.css"> </head> <body> <h3>HTML5拖放API之图片相框效果</h3> <hr /> <!--可放置文件区--> <div id="recycle" ondragover="allowDrop(event)" ondrop="fileDrop(event)"> 请将图片拖放至此处 </div> <br /> <!--带有相框的图片展示区--> <div id="output"></div> <script> //ondragover事件回调函数 function allowDrop(ev) { //解禁当前元素为可放置被拖拽元素的区域 ev.preventDefault(); } //ondrop事件回调函数 function fileDrop(e) { …………………………备注：查看完整代码请下载附件 https://download.csdn.net/download/YQEMMMM/12982765
