请选择 进入手机版 | 继续访问电脑版

HTML5拖拽文件上传

[复制链接]
暖男先生 发表于 2021-1-2 12:02:47 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
上传文件

HTML5新增了文件API,提供客户端当地操纵文件的大概.
我们可以通过file表单或拖放操纵选择文件,还可以通过JavaScript读取文件的名称、巨细、范例、和修改时间.
file范例的input表单新增了files属性,生存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.
  可以使用accept属性规定文件上传的MIME范例 比方’image/jpeg’
  1.                     请选择文件                    
  2.                     读取文件信息        
复制代码
页面拖拽操纵

对于被拖拽的元素,HTML5增加了三个事件用于监听拖拽的过程


  • dragstart 拖拽开始
  • drag 正在拖拽
  • dragend 拖拽竣事
  1.    
  2.    
复制代码
  想要拖拽元素,必须设置draggable属性
  页面默认的动作是拖拽后回到原位
在拖动阶段,我们可以存储被拖动元素的属性大概状态到事件对象的dataTransfer中,如果出现跳转,则是欣赏器默认的事件被触发,我们需要使用e.preventDefault()来阻止默认事件。
投放区的事件
对于被拖的元素而言,拖向那里则为投放区,投放区的事件如下:


  • dragenter 被拖放元素进入
  • dragover 被拖放元素移动
  • dragleave 被拖放元素脱离
  1.    
  2.    
复制代码
而drop则是监听被拖拽物拖拽到投放区并松开鼠标的事件,他可以吸收到dataTransfer中的数据,所以我们的页面内拖拽可以写成如下效果:
  1.     *{        box-sizing: border-box;    }   
  2.             第一个
  3.         第二个
  4.    
复制代码


  • 对于谷歌欣赏器,e.dataTransfer.setData(key,value)会导致拖拽到投放区域外的时候欣赏器默认搜索设置的值。如果需要,我们可以屏蔽它
  • 对于火狐欣赏器,没有e.dataTransfer.setData(key,value)还不可。我们可以直接设置键值对为null,"";
  • 最新版本的谷歌和火狐欣赏器没有发现问题
  • drop事件并不能直打仗发,因为默认的松开鼠标我们的拖拽物会返回原来的位置,并不会掉落,所以我们应该阻止投放区域的默认事件.
拖拽文件上传

颠末观察,事件对象中的dataTransfer也存在files属性,我们可以用熟悉的方法上传拖拽进来的文件:
  1.    
复制代码
然后做Ajax文件上传即可
  1. one.ondrop = function(e) {    e.preventDefault()    var file = e.dataTransfer.files[0];    var formData = new FormData();    formData.append("aa", file);    var xml = new XMLHttpRequest();    xml.open("post", url, false);    xml.send(formData);}
复制代码
来源:https://blog.csdn.net/CSDNzhaojiale/article/details/112055006
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )