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 设计模式 富有表现力的Javascript(一)
May 26 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 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实现WEB动态网页静态
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP安全性漫谈
2012/06/28 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
window.open的功能全解析
2006/10/10 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
js 颜色选择插件
2017/01/23 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python写的服务监控程序实例
2015/01/31 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python hook监听事件详解
2018/10/25 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
投资协议书范本
2014/04/21 职场文书
计算机实训报告范文
2014/11/05 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
2014年测量员工作总结
2014/12/12 职场文书
黄山导游词
2015/01/31 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
golang slice元素去重操作
2021/04/30 Golang
golang生成并解析JSON
2022/04/14 Golang