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跨Iframe选择实现代码
Aug 19 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
vue 2.0路由之路由嵌套示例详解
May 08 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
详解Vue数据驱动原理
Nov 17 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 版本]
2007/03/20 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
三年级音乐教学反思
2014/01/28 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
管理失职检讨书范文
2015/05/05 职场文书
欠款起诉书范文
2015/05/19 职场文书
保护环境的宣传语
2015/07/13 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
Mysql数据库group by原理详解
2022/07/07 MySQL