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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
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中的函数-- foreach()的用法详解
2013/06/24 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
js Dialog 实践分享
2012/10/22 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
医务人员自我评价
2014/01/26 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
高考学习决心书
2015/02/04 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
校友会致辞
2015/07/30 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python