如何拖拽图片到指定位置，具体方法如下

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

完整代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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实现本地图片文件拖拽效果的更多相关文章

  1. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  2. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  3. 原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小

    网上搜的资料,源码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  9. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

随机推荐

  1. 1.TabActivity、视图树、动画

    整个页面为TabActivity, 其中对TabWidget进行了一些改变,当切换页签时页签后面红色背景会以Translate动画形式移动到相对应的页签后. 布局 )); lastPosition = ...

  2. 第73节：Java中的HTTPServletReauest和HTTPServletResponse

    第73节:Java中的HTTPServletReauest和HTTPServletResponse HTTP协议 客户端与服务器端通讯的一种规则. request: 请求行 请求头 请求体 respo ...

  3. 使用《JAVA面向对象编程》总结

    抽象和封装 现实世界是“面向对象”的,面向对象就是采用“现实模拟” 的方法设计和开发程序. 面向对象设计是目前计算软件开发中最流行的技术.面向对象设计的过程就是抽象的过程. 类是对某一类事物的描述,是 ...

  4. nginx+lua学习

    1. nginx+lua学习 1.1. 网关架构 1.2. nginx命令和信号控制 nginx -s stop 快速关闭,不管有没有正在处理的请求 nginx -s quit 优雅关闭方式,推出前完 ...

  5. Kubenetes 核心概念理解

    Kubernetes 是一个具有自动控制 .自动纠错功能的资源管理系统 可以把 Node , Pod , Replication Controller , Service 等都看做是一种 " ...

  6. os模块及其API&属性

    模块: os os.path 所包含API列表: os.uname: 获取详细的系统信息 os.rename: 文件重命名 os.remove: 删掉文件 os.mkdir: 创建一个目录 os.rm ...

  7. python基础-变量运算符(3)

    一.注释 注释就是对代码的解释和说明.目的是为了让别人和自己很容易看懂.为了让别人一看就知道这段代码是做什么用的.正确的程序注释一般包括序言性注释和功能性注释.序言性注释的主要内容包括模块的接口.数据 ...

  8. [ncw7] 小睿睿的方案

    考虑一对情侣(x,y)x<y的贡献,设in[x],out[x]为数的dfs序. 强制从x走向y方向 当in[x]<in[y]且out[y]<=out[x] 矩形{1,in[x],in ...

  9. Ansible系列之roles使用说明

    roles(角色)介绍 ansible自1.2版本开始引入的新特性,用于层次性,结构化地组织playbook.roles能够根据层次型结构自动装载变量文件.tasks以及handlers等.要使用ro ...

  10. C++ STL中的map用红黑树实现，搜索效率是O(lgN),为什么不像python一样用散列表从而获得常数级搜索效率呢？

    C++ STL中的标准规定: map, 有序 unordered_map,无序,这个就是用散列表实现 谈谈hashmap和map的区别,我们知道hashmap是平均O(1),map是平均O(lnN)的 ...