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 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 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
人族 TERRAN 概述
2020/03/14 星际争霸
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
决策树的python实现方法
2014/11/18 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python学习开发mock接口
2019/04/28 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python解释器spython使用及原理解析
2019/08/24 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
给面试官的感谢信
2014/02/01 职场文书
小学毕业感言150字
2014/02/05 职场文书
优秀医生事迹材料
2014/02/12 职场文书
高中教师评语大全
2014/04/25 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers