1.效果图：

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实现文件拖拽事件的更多相关文章

  1. day25—JavaScript实现文件拖拽上传案例实践

    转行学开发,代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器,后天将文件打开的小案例. 基本功能:1点击添加文件 2 文件拖拽添加 html: < ...

  2. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. HTML5应用之文件拖拽上传

    使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. H ...

  4. HTML5文件拖拽

    HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...

  5. VC实现文件拖拽OnDropFiles

    文章转自http://blog.csdn.net/zamaolangzi/article/details/5645284 使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是 ...

  6. wxpython实现文件拖拽

    我想让wx.grid里面的单元格能够支持文件拖拽,实现起来挺简单的,共分3步: 1.创建一个wx.FileDropTarget子类的对象,并把要支持拖拽的控件传给它的构造函数,此处是grid 2.调用 ...

  7. day52—JavaScript拖拽事件的应用（自定义滚动条）

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  8. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  9. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. PowerShell 解决红字一闪而过问题

    起因 起初只想在 win7上实现 pause 效果而已 cmd /c pause | out-null 结果只能看到红字一闪而过 打开 PowerShell ISE 进行调试 这次清楚的看到红字提示 ...

  2. Step by Step 开发dynamics CRM

    这里是作为开发贴的总结. 现在plugin和workflow系列已经终结. 希望这些教程能给想入坑的小伙伴一些帮忙. CRM中文教材不多, 我会不断努力为大家提供更优质的教程. Plugin 开发系列 ...

  3. spring学习地址

    http://developer.51cto.com/art/201006/205212_2.htm

  4. List集合的特有功能概述和测试

    List集合的特有功能概述和测试A:List集合的特有功能概述void add(int index,E element)E remove(int index)E get(int index)E set ...

  5. 03-Linux命令基础-第03天（makefile、静态库、动态库、gdb调试工具）

    01- 复习 tar tvf xxx 查看压缩包内容 区分前后台: 是否能和用户交互 Vmware选桥接模式 会给系统虚拟一个和外部相同网段的ip 02- vim扩展操作 因为不是做嵌入式开发的 所以 ...

  6. Java核心技术读书笔记01

    Volume I Chapter 1  An Introduction to Java  • 1.1 Java as a Programming Platform• 1.2 The Java ‘Whi ...

  7. vue全局使用axios的方法

    在vue项目开发中,我们使用axios的二次封装,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vu ...

  8. RabbitMQ学习总结（1）——基础概念详细介绍

    一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...

  9. Adaptively handling remote atomic execution based upon contention prediction

    In one embodiment, a method includes receiving an instruction for decoding in a processor core and d ...

  10. 0816关于MySQL的审计 init-connect+binlog实现用户操作追踪

    转自:http://blog.sina.com.cn/s/blog_605f5b4f01013xkv.html mysql 用init-connect+binlog实现用户操作追踪 做access 的 ...