HTML5拖拉上传文件的简单实例_1
作者:来源:代码学苑发表于:2020-06-18 13:14:03
在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>
相关文章
-
无相关信息
最新推荐
- 宝塔面板FTP链接服务器发回了不可路由地址
- 阿里云ecs安装宝塔面板失败原因?以及安装步骤?
- 织梦手机端-识别跳转
- html如何在一个form表单中实现多个submit
- thinkphp无限分类原理和实现代码
- thinkphp6 请求(request)变量
- 帝国CMS自定义列表SQL调用方法
- 帝国CMS自定义列表的使用实例
- 帝国cms自定义列表限制某个栏目显示
- PHP中利用for循环判断一个数是不是回文数
- PHP中判断一个数是否为素数的方法
- PHP中break,continue,exit的使用与区别
- 测试PHP连接MYSQL成功与否的代码
- PHP编程求最大公约数与最小公倍数的方法示例
- PHP获取数组中单列值的方法
- PHP使用一个for循环将N*N的二维数组的所有值置1实现方法
- HTML5+css3:3D旋转木马效果相册
- HTML,CSS,font-family:中文字体和英文名称对照表
- HTML使用栅格布局实现六种筛子样式的代码详解
- 修改CSS样式实现网页变灰色/黑白代码的几个方法整理
最新更新
- 黄庭坚《水调歌头·游览》我欲穿花寻路 直入白云深处
- 黄庭坚《品令·茶词》恰如灯下 故人万里 归来对影
- 杜荀鹤《溪兴》山雨溪风卷钓丝 瓦瓯篷底独斟时
- 储光羲《张谷田舍》一径入寒竹 小桥穿野花
- 赵嘏《寒塘》晓发梳临水 寒塘坐见秋
- 蔡确《夏日登车盖亭》纸屏石枕竹方床 手倦抛书午梦长
- 李峤《书》河图八卦出 洛范九畴初
- 刘长卿《饯别王十一南游》长江一帆远 落日五湖春
- 韦庄《章台夜思》芳草已云暮 故人殊未来
- 卢纶《宿澄上人院》竹窗闻远水 月出似溪中
- 孟浩然《留别王侍御维》只应守寂寞 还掩故园扉
- 苏轼《南乡子·送述古》归路晚风清 一枕初寒梦不成
- 王维《木兰柴》秋山敛馀照 飞鸟逐前侣
- 王维《栾家濑》跳波自相溅 白鹭惊复下
- 苏轼《少年游·润州作代人寄远》对酒卷帘邀明月 风露透窗纱
- 苏轼《行香子·过七里濑》一叶舟轻 双桨鸿惊 水天清 影湛波平
- 王维《汉江临泛》江流天地外 山色有无中
- 柳宗元《溪居》晓耕翻露草 夜榜响溪石
- 杜牧《赠宣州元处士》蓬蒿三亩居 宽于一天下
- 项鸿祚《清平乐·池上纳凉》水天清话 院静人销夏