利用拖拽效果实现文件上传功能

最新推荐文章于 2025-03-27 18:54:09 发布

柒柒三拾一

最新推荐文章于 2025-03-27 18:54:09 发布

阅读量7.7k

点赞数 1

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/weixin_37977288/article/details/80715574

版权

本文介绍了如何通过拖拽操作实现文件上传功能。首先讲解了如何获取文件，无论是通过input表单元素还是拖拽操作的dataTransfer对象。接着提供了一个示例代码，展示了具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取文件的方法

file对象是来自用户在一个<input>表单元素上选择文件后返回的filelist对象,也可以是来自自由拖拽操作生成的dataTransfer对象，dataTransfer是拖拽事件对象的属性。

2、示例代码

<body>
	<div id="touxiang"></div>
	<div id="drag"></div>
</body>

<style type="text/css">
		#touxiang{
			width:200px;
			height:200px;
			line-height:200px;
			text-align:center;
			font-size:80px;
			border:1px solid #ccc;
			margin:0 auto;
			position: relative;
		}
		#touxiang:after{
			content:"+";
			color:#ccc;
		}
	#drag{
		width:500px;
		height:350px;
		border:1px dashed #ccc;
		margin:0px auto;
	}
	#touxiang img{
		width:200px;
		height:200px;
		position: absolute;
		top:0;
		left:0;
		z-index:1;
	}