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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
工作需要写的一个js拖拽组件
Jul 28 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 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
Smarty局部缓存的几种方法简介
2014/06/17 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
什么是servlet链?
2014/07/13 面试题
销售类求职信
2014/06/13 职场文书
大学生社会实践感想
2015/08/11 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
MySQL之select、distinct、limit的使用
2021/11/11 MySQL