H5拖曳文件上传示例

最新推荐文章于 2024-09-01 17:23:33 发布

misaka去年夏天

最新推荐文章于 2024-09-01 17:23:33 发布

阅读量3.8k

点赞数

分类专栏： js html+css 文章标签： xhtml html5 javascript 异步文件上传

本文链接：https://blog.csdn.net/misakaqunianxiatian/article/details/50659085

版权

本文通过H5的拖曳事件，展示了如何实现无需表单的异步文件上传功能，提供了一段示例代码。

摘要由CSDN通过智能技术生成

利用H5的拖曳事件，可以不用表单就完成异步文件上传，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>h5拖拽异步上传</title>
</head>
<style>
	#uuz{
		width: 200px;
		height: 200px;
		border: 1px dashed orange;
		text-align: center;
	}
</style>
<body>
	<div id="uuz">
		
	</div>
</body>
<script>
	window.onload = function(){
		var uuz = document.getElementById('uuz');

		uuz.ondragenter = function(e){
			e.preventDefault();
		}

		uuz.ondragover = function(e){
			e.preventDefault();
			this.innerHTML = '请松开';
		}

		uuz.ondragleave = function(e){
			e.preventDefault();
			this.innerHTML = '请拖入要上传的文件';
		}

		uuz.ondrop = function(e){
			e.preventDefault();

			var upfile =