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. ASP.NET MD5加密

    protected void Button1_Click(object sender, EventArgs e) { string pwd = TextBox2.Text.Trim(); Respon ...

  2. python利用numpy存取文件

    NumPy提供了多种存取数组内容的文件操作函数.保存数组数据的文件可以是二进制格式或者文本格式.二进制格式的文件又分为NumPy专用的格式化二进制类型和无格式类型. numpy格式的文件可以保存为后缀 ...

  3. EF6 mysql配置

    如何把一个ef项目 从sqlserver改为mysql 首先在引入了ef的层再引入这两个包,注意两个的版本一定要一样,一定要一样,一定要一样,不然就会报错 MySql.Data.Entity目前的最新 ...

  4. Day 22 面向对象编程

    面向对象基础 面向对象编程(抽象) 对象:特征和技能的结合体 面向对象编程:一个个对象进行交互 优点:扩展性非常强 缺点:逻辑非常复杂 类与对象 类(类别):一系列具有相同特征和技能的对象 现实世界中 ...

  5. POJ3069 Saruman's Army【贪心】

    Saruman the White must lead his army along a straight path from Isengard to Helm's Deep. To keep tra ...

  6. [luogu4159 SCOI2009] 迷路(矩阵乘法)

    传送门 Solution 矩阵乘法新姿势qwq 我们知道当边权为1是我们可以利用矩阵快速幂来方便的求出路径数 那么对于边权很小的时候,我们可以将每个点都拆成若干个点 然后就将边权不为1转化为边权为1了 ...

  7. docker安装部署

    1. 如何安装 Epel源到 RHEL/CentOS 7/6/5? RHEL/CentOS rpm -ivh http://mirrors.ustc.edu.cn/epel/7/x86_64/Pack ...

  8. 【[Offer收割]编程练习赛10 C】区间价值

    [题目链接]:http://hihocoder.com/problemset/problem/1483 [题意] 中文题 [题解] 二分最后的答案; 二分的时候; 对于每一个枚举的值x; 计算小于等于 ...

  9. mongodb drop不释放磁盘空间

    点击(此处)折叠或打开 use demodb //使用demodb,以下假设操作的collection是foo db.foo.remove({"id":"123456&q ...

  10. TortoiseGit生成PuttyKey与GitHub的SSH进行关联

    1.打开Puttygen 要到进度条满格为止,知道出现如下界面: 把上面的Key复制. 最后点击[Save private key]保存. 2.登录GitHub进行如下操作: Settings-> ...