js实现本地图片文件拖拽效果

作者：输出是最好的学习时间：2024-04-16 10:31:34　

如何拖拽文件到指定位置，具体方法如下

在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上代码

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#dropBox{
width: 300px;
height: 300px;
border:1px solid red;
font-size: 40px;
text-align: center;
background: lightyellow;
background-repeat: no-repeat;
background-size: 100％;
}
#dropBox div{
margin:50px auto;
width: 140px;
}
</style>
</head>
<body>
<div id="dropBox">
<div>拖动你的图片到这里</div>
</div>
<script type="text/javascript">
var dropBox;
window.onload=function(){
dropBox = document.getElementById("dropBox");
// 鼠标进入放置区时
dropBox.ondragenter = ignoreDrag;
// 拖动文件的鼠标指针位置放置区之上时发生
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
function ignoreDrag(e){
// 确保其他元素不会取得该事件
e.stopPropagation();
e.preventDefault();
}
function drop(e){
e.stopPropagation();
e.preventDefault();

// 取得拖放进来的文件
var data = e.dataTransfer;
var files = data.files;
// 将其传给真正的处理文件的函数

var file = files[0];
var reader = new FileReader();
reader.onload=function(e){
dropBox.style.backgroundImage = "url('"+e.target.result+"')";
}
reader.readAsDataURL(file);
}
</script>
</body>
</html>

标签：js,拖拽

投稿

js实现本地图片文件拖拽效果

猜你喜欢

js实现贪吃蛇游戏含注释

Python学习笔记之装饰器

深入浅析Python中的yield关键字

mysql insert 存在即不插入语法说明

Dreamweaver实现flash透明背景

SQL Server 开窗函数 Over()代替游标的使用详解

Python threading Local()函数用法案例详解

Django 用户认证组件使用详解

pytorch DistributedDataParallel 多卡训练结果变差的解决方案

详解爬虫被封的问题

python/golang实现循环链表的示例代码

mysql下载与安装过程详解

wxPython使用系统剪切板的方法

python 实现存储数据到txt和pdf文档及乱码问题的解决

Linux上安装Python的PIL和Pillow库处理图片的实例教程

Keras—embedding嵌入层的用法详解

利用Python编写一个记忆翻牌游戏

windows 7安装ORACLE 10g客户端的方法分享

聚焦 DreamWeaver MX 2004

详解Golang中Channel的用法