【jQuery】将文件拖拽到页面或某个区域内实现上传

厨樱

已于 2022-04-12 13:48:34 修改

阅读量1.8k

点赞数

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

于 2022-04-10 13:48:15 首次发布

本文链接：https://blog.csdn.net/michiko98/article/details/124077001

版权

前端专栏收录该内容

46 篇文章 5 订阅

订阅专栏

实现效果：

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>拖拽到页面区域内上传文件</title>
<style type="text/css">
.container {
	height: 500px;
}

.mask-zone {
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(97, 160, 255, 0.2);
	top: 0;
	left: 0;
	z-index: 100;
	cursor: pointer;
	transition: all 0.15s;
	border: 3px dashed #61A0FF;
	border-radius: 10px;
}
</style>
</head>
<body>
	<div class="container">
		<div style="border: 1px solid; height: 100%;" id="centerContent">将文件拖拽到页面或某个区域内即可上传</div>
	</div>
</body>
<script
	src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"
	type="text/javascript"></script>
<script type="text/javascript">
	var dragFiles = [];

	//拖拽导入word或excel文件功能-yan
	var lastenter = null;
	$('#centerContent').bind('dragenter', function(e) {
		lastenter = e.target; // 记录最后进入的元素
		//阻止浏览器默认打开文件的操作
		e.preventDefault();
		//拖入文件后加遮罩层
		if ($('#centerContent .mask-zone').length == 0) {
			$('#centerContent').append('<div class="mask-zone"></div>');
		}
	})
	// 在ie下需要增加如下代码，否则不会触发drop事件
	$('#centerContent').bind('dragover', function(ev) {
		ev.preventDefault();
	});
	$('#centerContent').bind('dragleave', function(e) {
		// 如果此时退的元素是最后进入的元素，说明是真正退出了`drag-zone`元素
		if (lastenter === e.target) {
			$('.mask-zone').remove();
		}
	})
	$('#centerContent').bind(
			'drop',
			function(e) {
				$('.mask-zone').remove();
				//阻止浏览器默认打开文件的操作
				e.preventDefault();
				//获取到的files即上传的文件对象
				var files = e.originalEvent.dataTransfer.files;

				var fileName = files[0].name;
				if (files.length > 1) {
					layer.msg('请上传单个文件！');
					return;
				}
				var fileNameArr = fileName.split('.');
				//限制文件类型
				if (fileNameArr[fileNameArr.length - 1] != 'doc'
						&& fileNameArr[fileNameArr.length - 1] != 'docx'
						&& fileNameArr[fileNameArr.length - 1] != 'xls'
						&& fileNameArr[fileNameArr.length - 1] != 'xlsx') {
					layer.msg('请上传word或excel文档！');
					return;
				}
				dragFiles = files;
				//进行上传操作，例如拼接参数，ajax调用上传接口等
				//...
			})
</script>
</html>

厨樱

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】将文件拖拽到页面或某个区域内实现上传

实现效果：代码如下：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta .
复制链接

扫一扫