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 相关文章推荐
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
JS表的模拟方法
Feb 05 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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对mongodb的扩展(初出茅庐)
2012/11/11 PHP
详解PHP中的PDO类
2015/07/06 PHP
重定向实现代码
2006/11/20 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
Python的另外几种语言实现
2015/01/29 Python
Python读取Excel的方法实例分析
2015/07/11 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python中rc1什么意思
2020/06/19 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
文秘专业应届生求职信
2014/05/26 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
经典祝酒词大全
2015/08/12 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
python多次执行绘制条形图
2022/04/20 Python