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 相关文章推荐
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
FileUpload上传图片(图片不变形)
Aug 05 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
vue 实现用户登录方式的切换功能
Apr 14 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
用PHP制作静态网站的模板框架(四)
2006/10/09 PHP
第二节--PHP5 的对象模型
2006/11/16 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
python中可以声明变量类型吗
2020/06/18 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
初中生自我评价
2014/02/01 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
二审答辩状范文
2015/05/22 职场文书
教师节座谈会主持词
2015/07/03 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
解决 redis 无法远程连接
2022/05/15 Redis