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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
详解js中Array的方法及技巧
Sep 12 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 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之第三天
2006/10/09 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
理解javascript模块化
2016/03/28 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python assert的用处示例详解
2019/04/01 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
python属于解释型语言么
2020/06/15 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
北大自主招生自荐信
2013/10/19 职场文书
公司市场部岗位职责
2013/12/02 职场文书
客户经理岗位职责
2013/12/08 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
工作个人的自我评价
2014/01/14 职场文书
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript