HTML5拖拉上传文件的简单实例
导读:收集整理的这篇文章主要介绍了HTML5拖拉上传文件的简单实例,觉得挺不错的,现在分享给大家,也给大家做个参考。 在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能 在拖动目标上触发事件 (源元素 :...
收集整理的这篇文章主要介绍了HTML5拖拉上传文件的简单实例,觉得挺不错的,现在分享给大家,也给大家做个参考。 在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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5拖拉上传文件的简单实例
本文地址: https://pptw.com/jishu/585674.html