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 相关文章推荐
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
JS作用域链详解
Jun 26 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
vue登录注册实例详解
Sep 14 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
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+mysql查询优化简单实例
2015/01/13 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
深入理解React高阶组件
2017/09/28 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
JS实现拖动模糊框特效
2020/08/25 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
什么是Python中的匿名函数
2020/06/02 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
小学教师的自我评价范例
2013/10/31 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
竞选村长演讲稿
2014/04/28 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python