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 相关文章推荐
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
js定时器实例分享
Dec 20 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP文件操作实例总结
2016/09/27 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
wxpython实现图书管理系统
2018/03/12 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
机械工程学院大学生求职信
2014/05/25 职场文书
先进事迹材料范文
2014/12/29 职场文书
工作表扬信范文
2015/01/17 职场文书
主婚人致辞精选
2015/07/28 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL