网络编程
位置：首页>> 网络编程>> JavaScript>> js实现本地图片文件拖拽效果

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

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

标签：js,拖拽

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

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

完整代码：


<!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>
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com