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

在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上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. Canal学习笔记（客户端）

    前言 最近公司用到Canal来做从MySQL到Tidb的数据同步,用到HA模式Canal,记录一下HA模式的工作原理. Canal的架构模式 Canal是利用binlog日志来做数据同步,canal伪 ...

  2. 没执行过 rm -rf /* 的开发不是好运维

    阅读本文大概需要 1 分钟. 打开终端,获取 root 权限,执行以下命令:rm -rf /*,会发生什么呢?估计只要接触过 Linux 的人,肯定没少听过它的故事,清楚之后会发生什么可怕的事情. 科 ...

  3. 在react中使用less（官方做法）

    概述 在用create-react-app搭建react app的时候,原生并不支持less,只支持css.不过create-react-app官方给了一种方法使用less,我觉得很有用,记录下来,供 ...

  4. ubuntu系统给用户增加root权限

    在安装软件包的时候,会提示没有sudo权限. eg : sudo apt-get install golang 解决方法 进入有root权限的用户 eg: su root 并根据提示输入密码 sudo ...

  5. Python Selenium 常用方法总结（不断补充）

    还有此篇内容也丰富Selenium常见元素定位方法和操作的学习介绍 selenium Python 总结一些工作中可能会经常使用到的API. 1.获取当前页面的Url 方法:current_url 实 ...

  6. shell变量定义与数组-1

    1.查看系统所有shell和默认shell 查看系统所有的shell: cat /etc/shells 查看系统默认shell: echo $SHELL 2.第一个shell脚本,打印字符串Hello ...

  7. 函数式编程之-定义能够支持Partial application的函数

    是时候介绍如何在F#中定义函数了,在你没有接触过函数式编程语言之前,你也许会觉得C#/Java的语法已经够丰富了,有什么任务做不了呢?当你读过函数式编程之Currying和函数式编程之Partial ...

  8. 野路子Java开发的一篇随笔

    园子的朋友们,一年半的时间大家过的还好吧?       流水它带走光阴的故事改变了我们,再次的见面我们又历经了多少的路程,落花流水,冷暖自知,这一年半,关于工作上的关键词只有两个:加班(996弱多了) ...

  9. 开源任务调度平台elastic-job-lite源码解析

    前段时间写过一遍文章<一文揭秘定时任务调度框架quartz>,有读者建议我再讲讲elastic-job这个任务调度框架,年末没有那么忙,就来学习一下elastic-job. 首先一点,el ...

  10. Perl文件测试操作和stat函数

    在shell中通过test命令或者中括号[]可以进行文件测试以及其它类型的测试,例如判断文件是否存在,比较操作是否为真等等.perl作为更强大的文本处理语言,它也有文件测试类表达式,而且和shell的 ...