js文件拖拽上传,拖拽上传怎么弄

上传文件

　　 HTML5增加了文件API，为客户端本地操作文件提供了可能。

　　我们可以通过文件形式或者拖拽操作选择文件，通过JavaScript读取文件的名称、大小、类型、修改时间。

　　文件属性被添加到文件类型的输入表单中，以保存我们上传的文件的信息。如果要上传多个文件，可以设置输入的多个属性。

　　您可以使用accept属性来指定文件上载的MIME类型，例如“image/jpeg”

　　form action= # div class= form-group label for= input _ 1 。请选择一个文件/标签输入id= input _ 1 class= form-control name= input _ 1 type= file /Div class= form-group button id= BTN _ 1 class= BTN BTN-default type= button 读取文件信息/button/Div/form preid= result /pre/divscriptvarbtn=document . query selector( # BTN _ 1 )；var input=document . query selector( # input _ 1 )；Btn.addEventListener (click ，function(){//获取文件域中选中的文件//var file=input . files[0]；var file=input . files . item(0)；If (file) {result.innerHTML=文件名： file.name \文件的上次修改日期： file .上次修改日期 \ n文件类型： file.type \文件大小： file . size byte } else { result . innerhtml=未选择任何文件。}});/script

页面拖拽操作

　　对于被拖动的元素，HTML5增加了三个事件来监控拖动过程。

　　Dragstart拖动开始拖动正在拖动dragend拖动结束body div id= one style= width:300 px；高度：300pxborder: 1px纯红/div div id= two style= width:100px；高度：100pxborder: 1px纯蓝 draggable= true /div/body script type= text/JavaScript two . ondragstart=function(e){//e . prevent default()；console . log(e)；e.dataTransfer.setData(Text ，e . target . id)；console . log(e . data transfer . get data( Text ，e . target . id))；one . innerhtml= start } two . dragon=function(e){ one . innerhtml= drawing } two . ondragend=function(e){ one . innerhtml= end }/script要拖动一个元素，必须设置draggable属性。

　　页面的默认动作是拖放并返回到原始位置。

　　在拖动阶段，我们可以将被拖动元素的属性或状态存储在事件对象的dataTransfer中。如果有跳转，浏览器默认事件被触发。我们需要使用e.preventDefault()来阻止默认事件。

　　拖放区中的事件

　　对于被拖动的元素，它被拖动到的位置是拖放区，拖放区中的事件如下：

　　Dragenter被拖动元素进入dragover被拖动元素移动dragleave被拖动元素离开正文div ID= one style= width:300 px；高度：300pxborder: 1px纯红/div div id= two style= width:100px；高度：100pxborder: 1px纯蓝 draggable= true /div/body script type= text/JavaScript one . ondragenter=function(e){//e . prevent default()；console . log(e)；one . innerhtml= start } one . ondragover=function(e){ one . innerhtml= drawing } one . ondragleave=function(e){ one . innerhtml= end }/Script drop是监控拖动对象到拖放区域并释放鼠标的事件。他可以在dataTransfer中接收数据，因此我们页面中的拖动可以写成如下形式：

　　style type= text/CSS * { box-sizing:border-box；}/style正文div id= one style= width:300 px；高度：300像素边框：1像素纯红/div div id= two style= width:100px；高度：100像素边框：1px纯蓝；显示：flex div style= width:50px；高度：100像素边框：1px纯黑色；第一个/div div style= width:50px；高度：100像素边框：1px纯粉色；第二个/div/div/body script type= text/JavaScript one。ondragover=function(e){ e .防止默认()；}两个。onmousedown=function(e){ e . target。draggable=true目标。ondragstart=function(ev){ ev。数据传输。setdata( Text ，ev。目标。innerhtml)；} e .目标。ondragend=function(){ two。remove child(this)} } one。ondrop=function(e){ var div=document。createelement( div )分区。style= width:50px；高度：100像素边框：1px纯黑；div。innerhtml=e .数据传输。获取数据(“文本”)这一点。追加子(div)}/脚本对于谷歌浏览器，e.dataTransfer.setData(键，值)会导致拖拽到投放区域外的时候浏览器默认搜索设置的值。如果需要，我们可以屏蔽它对于火狐浏览器，没有e.dataTransfer.setData(键，值)还不行。我们可以直接设置键值对为null，“”；最新版本的谷歌和火狐浏览器没有发现问题滴事件并不能直接触发，因为默认的松开鼠标我们的拖拽物会返回原来的位置，并不会掉落，所以我们应该阻止投放区域的默认事件。

拖拽文件上传

　　 经过观察，事件对象中的数据传输也存在文件属性，我们可以用熟悉的方法上传拖拽进来的文件：

　　body div id= one style= width:300 px；高度：300pxborder:1px纯红/div/body script type= text/JavaScript one。ondragover=function(e){ e .防止默认()；}一个。ondrop=function(e){ e .防止默认()控制台。日志(例如数据传输。文件[0])；}/脚本然后做埃阿斯文件上传即可

　　一个。ondrop=function(e){ e .阻止default()var file=e .数据传输。文件[0]；var formData=new formData()；formData.append(aa ，file)；var XML=new XMLHttpRequest()；xml.open(post ，url，false)；XML。发送(formData)；}到此这篇关于HTML5拖拽文件上传的示例代码的文章就介绍到这了，更多相关HTML5拖拽上传内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。