秒懂 javascript 拖拽上传文件

代码

直接贴代码了,复制到本地 .html 文件中即可实现以上演示效果:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>drag file</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.container {
			width: 60%;
			max-width: 600px;
			height: 320px;
			padding: 15px;
			margin: 20px auto 0;
			border-radius: 10px;
			background-color: #fce4ec;
		}
		.dashboard {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 12px;
			border: 3px dashed #F8BBD0;
			border-radius: 5px;
			font-size: 20px;
			color: #2c1612;
			cursor: text;
			white-space: pre-wrap; 
			/*word-break: break-all;*/
			word-wrap: break-word;
			overflow-y: auto;
		}
	</style>
</head>
<body>
	<div class="container">
		<div id="dashboard" class="dashboard"></div>
	</div>
	<script type="text/javascript">
		var dashboard = document.getElementById("dashboard")
		dashboard.addEventListener("dragover", function (e) {
			e.preventDefault()
			e.stopPropagation()
		})
		dashboard.addEventListener("dragenter", function (e) {
			e.preventDefault()
			e.stopPropagation()
		})
		dashboard.addEventListener("drop", function (e) {
			// 必须要禁用浏览器默认事件
			e.preventDefault()
			e.stopPropagation()
			var files = this.files || e.dataTransfer.files
			var reader = new FileReader()
			reader.readAsText(files[0], 'utf-8')
			reader.onload = function (evt) {
				var text = evt.target.result
				dashboard.innerText = text
			}
		})
	</script>
</body>
</html>

说明

  • 需对目标区域添加 drop 事件监听,在回调 中通过 参数 e.dataTransfer.files 获取被拖拽上传的文件数组。
  • 需要在 dragover 和 dragenter 事件监听中阻止浏览器默认行为。
  • 代码是用 utf-8 方式解析文件内容的,如果 文件或网页 编码不是 utf-8 的话,将会出现乱码。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python学习之旅

python appium笔记(二):元素定位

#这里的示例是用android来说明的,xpath应该是通用的,resource-id不太清楚,没配过IOS的环境

25810
来自专栏张戈的专栏

根据IE版本加载不同CSS样式的方法小结,解决低版本IE兼容问题

自从中国联盟成员导航采用响应式布局之后,不少朋友反馈该页面在 IE8、IE7 浏览器会错排,经测试发现确实存在这个问题,但我一直也没去深究解决。这几天博客折腾得...

44280
来自专栏贺贺的前端工程师之路

Flex Box布局学习- 兼容

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然...

9720
来自专栏机器学习从入门到成神

Vue.js的bind报错解决

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

24910
来自专栏落影的专栏

iOS开发笔记(二)

前言 开发做笔记是好习惯,总结分享是巩固记忆。 遇到问题,思考其背后的原因、原理。 AFNetworking 1、progress回调block,不在主线程;...

35070
来自专栏张善友的专栏

Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序...

21460
来自专栏狮乐园

codereview-s8

之后再efficiencyView方法中调用stopPropagation方法阻止事件冒泡

9330
来自专栏熊二哥

Sublime快速入门

在当前的互联网时代,任何程序语言和相关技术都只是实现互联网应用的一种手段,这也就造成了大量的互联网工程师长期与不同的语言、技术、系统环境、IDE等打交道。因此一...

20350
来自专栏iOS122-移动混合开发研究院

PureLayout,使用纯代码写AutoLayout

? ? ? ? ? ? 为iOS和OS X的自动布局最终的API -- 令人印象深刻的简单,非常强大。 PureLayout延伸的UIView /NSView...

32170
来自专栏Python中文社区

PyQt5 GUI应用程序工具包入门(2)

下面我们从一个简单的登录对话框来了解PyQt5的开发过程。 PyQt5支持两种界面开发方式:一种是在QtDesigner中设计界面,各种控件直接通过拖动添加;...

34390

扫码关注云+社区

领取腾讯云代金券