js拖拽上传文件,
在HTML5的个人计算机上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能
在拖动目标上触发事件 (源元素):
ondragstart -用户开始拖动元素时触发
翁德拉格-元素正在拖动时触发
翁德拉根-用户完成元素拖动后触发
释放目标时触发的事件：
翁德伦特-当被鼠标拖动的对象进入其容器范围内时触发此事件
翁德拉戈弗-当某被拖动的对象在另一对象容器范围内拖动时触发此事件
软骨叶-当被鼠标拖动的对象离开其容器范围内时触发此事件
奥德罗普-在一个拖动过程中，释放鼠标键时触发此事件
上代码
html lang= en head meta charset= UTF-8 标题拖拽/标题风格. box {宽度：800 px高度：600像素浮动：左；} # box1 {背景色：# ccc} # box2 {背景色：# 000;}/style/head body div id= box 1 class= box /div div id= box 2 class= box /div img id= img 1 src= 1。jpg div id= msg /div/body脚本var box 1 div，box2Div，msgDiv，img 1；窗户。onload=function(){ box 1 div=document。getelementbyid( box 1 )；框2 div=文档。getelementbyid( box 2 )；msg div=文档。getelementbyid( msg )；im G1=文档。getelementbyid( img 1 )；方框1。ondragover=function(e){ e .防止默认()；}框2 div。ondragover=function(e){ e .防止默认()；} img 1。ondragstart=函数(e){ e .数据传输。setdata( imgId ， img 1 )；}框1 div。ondrop=dropImghandler方框2。ondrop=dropImghandler}函数dropImghandler(e){ show obj(e)；//获取拖放所有信息显示obj(即数据传输)；//获取文件e .防止违约()；var img=文档。getelementbyid(即数据传输。获取数据( imgId )；目标。appendchild(img)；}函数show obj(obj){ var s= ；对于(obj中的var k){ s=k : obj[k] br/；} msgdiv。innerhtml=s；}/脚本/html该功能是可以将图片拖拉到左右两个差异中的方法，我觉得没啥用，可以当作哈啤
下面是拖拉上传代码，后端服务器端编程语言(专业超文本预处理器的缩写)获取到$ _文件之后就可以搞起来了
！文档类型html html lang= en head meta charset= UTF-8 标题拖放上传/title style # img容器{ background:# CCC；宽度：500像素高度：500 px }/style/head body div id= img container /div div id= msg /div/body script var img container，msgDivwindow。onload=函数(e){ img容器=文档。getelementbyid(“img容器”)；msg div=文档。getelementbyid( msg )；img容器。ondragover=function(e){ e .防止默认()；} img容器。ondrop=function(e){ e . prevent default()；数据传输。文件[0]；//这时已经获取到文件了，具体想要用第几个文件自己处理，发邮政请求后端处理就行了！//下面是图片获取到之后显示在imgContainer中的流程//var file reader=new fileReader()；//filereader。onload=function(){//img容器。innerhtml= img src=\ filereader。结果 \ //}//filereader。readas dataurl(f)；//show obj(e)；//显示上传信息//显示obj(例如数据传输。文件)；} }函数show obj(obj){ var s= ；对于(obj中的var k){ s=k : obj[k] br/；} msgdiv。innerhtml=s；}/脚本/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。