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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
小程序指纹验证的实现代码
Dec 04 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
Angular8基础应用之表单及其验证
Aug 11 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 google或baidu分页代码
2009/11/26 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python 域名分析工具实现代码
2009/07/15 Python
python得到电脑的开机时间方法
2018/10/15 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
表彰先进集体通报
2014/01/12 职场文书
科研课题实施方案
2014/03/18 职场文书
市场部经理岗位职责
2014/04/10 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android