javascript实现文件拖拽事件


Posted in Javascript onMarch 29, 2018

本文实例为大家分享了javascript实现文件拖拽事件的具体代码,供大家参考,具体内容如下

1.效果图:

javascript实现文件拖拽事件

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <style type="text/css">
    #div1 {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drop(ev) {
      ev.preventDefault();
      console.log(ev.dataTransfer.files);
    }
  </script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">将文件拖放到此处</div>

</body>
</html>

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

Javascript 相关文章推荐
Node.js中的流(Stream)介绍
Mar 30 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
Vue.js实现数据响应的方法
Aug 13 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
vue 父组件调用子组件方法及事件
Mar 29 #Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 #Javascript
Vue 源码分析之 Observer实现过程
Mar 29 #Javascript
vue 实现全选全不选的示例代码
Mar 29 #Javascript
Angular开发实践之服务端渲染
Mar 29 #Javascript
使用vue2实现购物车和地址选配功能
Mar 29 #Javascript
vue axios请求拦截实例代码
Mar 29 #Javascript
You might like
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python遍历路径破解表单的示例
2020/11/21 Python
方法名是否可以与构造器的名字相同
2012/06/04 面试题
2014年音乐教师工作总结
2014/12/03 职场文书
趣味运动会加油词
2015/07/18 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS