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 相关文章推荐
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
微信小程序动态显示项目倒计时
Jun 20 Javascript
JS+css3实现幻灯片轮播图
Aug 14 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目录管理函数小结
2008/09/10 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python中的集合介绍
2019/01/28 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
Unix如何添加新的用户
2014/08/20 面试题
营销主管自我评价怎么写
2013/09/19 职场文书
化学工程专业求职信
2014/08/10 职场文书
就业推荐表导师评语
2014/12/31 职场文书
教师求职信怎么写
2015/03/20 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL