HTML5 js实现拖拉上传文件功能


Posted in Javascript onNovember 20, 2020

在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能

在拖动目标上触发事件 (源元素):

ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

上代码

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>拖拽</title>
 <style>
  .box{width:800px;height:600px;float:left;}
  #box1{background-color:#ccc;}
  #box2{background-color:#000;}
 </style>
</head>
<body>
 <div id="box1" class="box"></div>
 <div id="box2" class="box"></div>
 <img id="img1" src="1.jpg">
 <div id="msg"></div>
</body>
<script>
var box1Div,box2Div,msgDiv,img1; 
window.onload = function(){
 box1Div = document.getElementById('box1');
 box2Div = document.getElementById('box2');
 msgDiv = document.getElementById('msg');
 img1 = document.getElementById('img1');
 box1Div.ondragover = function(e){e.preventDefault();}
 box2Div.ondragover = function(e){e.preventDefault();}

 img1.ondragstart = function(e){e.dataTransfer.setData('imgId','img1');}
 box1Div.ondrop = dropImghandler;
 box2Div.ondrop = dropImghandler;
}
function dropImghandler(e){
 showObj(e);//获取拖放所有信息
 showObj(e.dataTransfer);//获取文件
 e.preventDefault();
 var img = document.getElementById(e.dataTransfer.getData('imgId'));
 e.target.appendChild(img);
}
function showObj(obj){
 var s = '';
 for(var k in obj){s += k+":"+obj[k]+"<br/>";}
 msgDiv.innerHTML = s;
}
</script>
</html>

该功能是可以将图片拖拉到左右两个div中的方法,我觉得没啥用,可以当作哈啤
下面是拖拉上传代码,后端PHP获取到$_FILES之后就可以搞起来了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>拖放上传</title>
 <style>
  #imgContainer{background:#ccc;width:500px;height:500px;}
 </style>
</head>
<body>
 <div id="imgContainer"></div>
 <div id="msg"></div>
</body>
<script>
var imgContainer,msgDiv;
window.onload = function(e){
 imgContainer = document.getElementById('imgContainer');
 msgDiv = document.getElementById('msg');
 imgContainer.ondragover = function(e){
  e.preventDefault();
 }
 imgContainer.ondrop = function(e){
  e.preventDefault();
  var f = e.dataTransfer.files[0]; 
  //这时已经获取到文件了,具体想要用第几个文件自己处理,发post请求后端处理就行了!

  //下面是图片获取到之后显示在imgContainer中的流程
  // var fileReader = new FileReader();
  // fileReader.onload=function(){
  // imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"
  // }
  // fileReader.readAsDataURL(f);
  // showObj(e); //显示上传信息
  // showObj(e.dataTransfer.files);
 }
}
function showObj(obj){
 var s = '';
 for(var k in obj){s += k+":"+obj[k]+"<br/>";}
 msgDiv.innerHTML = s;
}
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
Vue渲染函数详解
Sep 15 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
Bootstrap表单控件使用方法详解
Jan 11 #Javascript
老生常谈的跨域处理
Jan 11 #Javascript
bootstrap选项卡使用方法解析
Jan 11 #Javascript
常用的javascript设计模式
Jan 11 #Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 #Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 #Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
PHP中的超全局变量
2006/10/09 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
详解Django rest_framework实现RESTful API
2018/05/24 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
EJB的几种类型
2012/08/15 面试题
应届毕业生求职自荐书
2014/01/03 职场文书
社区重阳节活动总结
2015/03/24 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
毕业典礼致辞
2015/07/29 职场文书
小学体育组工作总结
2015/08/13 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
九年级英语教学反思
2016/02/15 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js