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 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
JavaScript如何实现图片处理与合成
May 29 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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
paypal即时到账php实现代码
2010/11/28 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
浅析Node.js查找字符串功能
2014/09/03 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
Vue常用指令详解分析
2018/08/19 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python ftp上传文件
2016/02/13 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python爬取指定微信公众号文章
2018/12/20 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python验证码图片处理(二值化)
2019/11/01 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
企业安全生产演讲稿
2014/05/09 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
教师思想工作总结2015
2015/05/13 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
《开国大典》教学反思
2016/02/16 职场文书
创业计划书之甜品店
2019/09/18 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript