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

在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上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. shell 中的单行注释和多行注释

    1. 单行注释 众所周知,#  比如想要注释:echo “ni” # echo "ni" 2. 多行注释: 法一: : << ! 语句1 语句2 语句3 语句4 ! 例 ...

  2. Python的GUI编程（TK）

    TK在大多数 Unix平台.Windows平台和Macintosh系统都是预装好的,TKinter 模块是 Tk GUI 套件的标准Python接口.可实现Python的GUI编程. Tkinter模 ...

  3. python应用-爬取猫眼电影top100

    import requests import re import json import time from requests.exceptions import RequestException d ...

  4. 【shiro】(4)---Shiro认证、授权案例讲解

    Shiro认证.授权案例讲解 一.认证  1. 认证流程     2.用户密码已经加密.加盐的用户认证 (1)测试类 // 用户登陆和退出,这里我自定了一个realm(开发肯定需要自定义realm获取 ...

  5. VueJs(7)---计算属性和侦听器

    计算属性和侦听器 一. 概述 计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="exampl ...

  6. Jenkins系列之七——前端app自动打包

    了两周终于搞掂了,期间各种搜教程.各种懵逼,各种坑对小白来还是很难的额.废话不多说直接开撸~~~ 一.介绍下什么是Gradle Gradle是一个基于JVM的构建工具,是一款通用灵活的构建工具,支持m ...

  7. kibana6.2.4版本更新x-pack认证

    我在上一次介绍了如何安装时基本使用elk留下了一个问题,这次来解决这个问题,相必大家也想知道,接下来就看详细过程. 上次说到,直接看图吧. 因为x-pack是收费的,所以试用期只有一个月.长期使用就必 ...

  8. IdentityServer4（5）- 包和构建

    包和构建 IdentityServer有许多Nuget包组件 IdentityServer4 nuget | github 包含IdentityServer核心对象模型.服务和中间件.默认只包含了基于 ...

  9. linux 命令 — tr

    tr 对stdin字符进行替换.删除和压缩,基本形式 tr [options] set1 set2 将输入的字符串中的set1字符转换为set2中对应位置的字符 set1.set2表示字符集,如果se ...

  10. 自动生成实体类和xml

    1 首先eclipse需要安装一个插件 2 两个配置文件 1 generator.properties 2 generator.xml <?xml version="1.0" ...