HTML（3）HTML5拖放API自动生成相框

什么都不会…

于 2024-01-10 13:53:23 发布

阅读量1.1k

点赞数 9

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/qq_52187093/article/details/135501740

版权

前端专栏收录该内容

8 篇文章

订阅专栏

一、实验项目

3.2 图片相框展示的设计与实现

功能要求：使用HTML5拖放API相关技术，在网页上实现为指定图片自动生成图片相框的效果。用户通过拖拽可以将本地的图片文件放置到页面上指定区域，即可在页面上自动生成带有相框效果的图片展示。效果图如图所示。

实验要求：

1、使用<div>标签划分区域。

本地文件可放置区域，带有相框图片的展示区域。

2、CSS文件辅助渲染相框样式。

自定义外部样式表photoframe.css文件

3、可放置区域的实现，获取图片展示区域对象，

获取从本地拖拽放置的文件对象数组。

生成带有相框的图片效果。

图片下方显示图片文件信息（当前文件的文件名、大小及最新修改日期）。

二、实验源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5拖放API之图片相框效果</title>
        <style type="text/css">

#recycle {
    width:250px;
    height:100px;
    border: 1.5px dashed gray;
    text-align: center;
    line-height: 50px;
}

.photoframe {
	display: flex;/*弹性布局*/
	flex-direction: column;/*垂直排列*/
	justify-content: center;/*位于容器中央*/
	align-items: center;/*所有元素居中对齐*/
    background: url(./photoframe.jpg) no-repeat;
    width: 500px;
    height: 438px;
}

#output {
    margin: 10px;
    text-align: center;
    width: 500px;
}
</style>
    </head>
    <body>
        <h3>HTML5拖放API之图片相框效果</h3>
        <hr />
        <div id="recycle" ondragover="allowDrop(event)" ondrop="fileDrop(event)">
            <!-- ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondrop - 在一个拖动过程中，释放鼠标键时触发此事件-->
            请将图片拖放至此处
        </div>
        <br />
        <div id="output"></div>
        <script>
            function allowDrop(ev) {
                ev.preventDefault();
            }
           
            function fileDrop(e) {
                e.preventDefault();//解禁区域，为可拖拽
				
                var output = document.getElementById("output");//java获取展示区域对象output output是一个盒子用来展示整体照片
               // output.innerHTML = "";
               //获取内容并插入内容,加入html的output中

				var files = e.dataTransfer.files;//获取从本地拖拽放置的文件对象数组files 图片的数据上传到files数组
		
                for (var i = 0,f; f = files[i]; i++) 
                {
                    var imgURL = window.webkitURL.createObjectURL(f);//创建带有相框的图片。生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容
					var img = document.createElement("img");//新创建的图
                    img.setAttribute("src", imgURL);//将java中获取文件的的url赋予新建图
                    img.setAttribute("width", "330");
                    img.setAttribute("height", "270");

                    //图片

					var photo = document.createElement("div");
                    photo.setAttribute("class", "photoframe");//相框图片类型设为photoframe
                    photo.appendChild(img);//img插入相框
					
					//相框加图片 完整图像
					
					output.appendChild(photo);//out盒子再插入图片

					var status = document.createElement("div");//使用div元素创建状态信息栏
                    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;
					
                    output.appendChild(status);
                }
            }
        </script>
    </body>
</html>

三、运行结果