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


Posted in Javascript onJuly 18, 2017

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

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

完整代码:

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 #Javascript
js实现移动端导航点击自动滑动效果
Jul 18 #Javascript
JS实现点击Radio动态更新table数据
Jul 18 #Javascript
Angularjs的启动过程分析
Jul 18 #Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 #Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
ES6中的rest参数与扩展运算符详解
Jul 18 #Javascript
You might like
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP中each与list用法分析
2016/01/08 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python数据类型之List列表实例详解
2019/05/08 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
python 6种方法实现单例模式
2020/12/15 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
单位委托书格式范本
2014/09/29 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS