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

在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上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. Android Tools 开发工具库开源项目总结

    在Android开发中,我们不免会遇到使用一些工具库来简化我们的工具代码的编写,以下是本人之前star的开源项目,供大家参考: 一.android_testsuite 项目地址:https://git ...

  2. Javascript高级编程学习笔记（67）—— 事件（11）HTML5事件

    DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...

  3. Shiro基础

    Factory<T>接口(org.apache.shiro.util.Factory) 接口的getInstance()方法是泛型方法,可以用来创建SecurityManager接口对象 ...

  4. Windows下安装及使用NVM

    Windows下安装及使用NVM 所谓nvm就是一个可以让你在同一台机器上安装和切换不同版本node的工具.这里是一篇安装及使用教程. 第一步:下载nvm 可以到github上下载最新版本https: ...

  5. alert换行

    alert( "视频会议系统开启流程 " + String.fromCharCode(13) + "1.  软件下载之后双击安装即可." + String.fr ...

  6. 200 行代码使用 C# 实现区块链

    文章原文来自:Code your own blockchain in less than 200 lines of Go!,原始文章是通过 Go 语言来实现自己的区块链的,这里我们参照该文章来使用 C ...

  7. python常用库函数 - 备忘

    基础库 1. 正则表达式:re 符号 ()小括号 -- 分组 []中括号 -- 字符类,匹配所包含的任一字符 #注:字符集合把[]里面的内容当作普通字符!(-\^除外) {}大括号 -- 限定匹配次数 ...

  8. sql server 锁与事务拨云见日(上)

    一.概述 讲到sql server锁管理时,感觉它是一个大话题,因为它不但重要而且涉及的知识点很多,重点在于要掌握高并发要先要掌握锁与事务,涉及的知识点多它包括各式各样的锁,锁的组合,锁的排斥,锁延伸 ...

  9. mysql 开发基础系列5 运算符

    1. 算术运算符 2.比较运算符 注意NULL值不能用= 运算符 SELECT * FROM t WHERE c =NULL; -- 需要改成 SELECT * FROM t WHERE c IS N ...

  10. PHP中的__set和__get方法

    当调用或者设置类不存在的方法时,_会调用_set和__get方法 以下是示例 <?php class HandsonBoy { private $name = 'chenqionghe'; pr ...