愚墨的博客
  • 首页
  • 前端技术
  • 面试
只争朝夕不负韶华
  1. 首页
  2. HTML5
  3. 正文

H5中拖拽图片显示并上传

2017年01月07日 2517点热度 0人点赞 0条评论

拖拽事件有7种,但是根据作用对象不同可以分为两大类:

被拖拽元素上触发的事件:

  1. ondragstart - 用户开始拖动元素时触发
  2. ondrag - 元素正在拖动时触发
  3. ondragend - 用户完成元素拖动后触发

目标元素上触发的事件:

  1. ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  2. ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  3. ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  4. ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

使用事件时,一般都会preventDefault()。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

将图片的缩略图显示出来使用的是FileReader API,具体请移步,这里就不多写了。

如何将图片文件上传 移步这里

如何剪裁图片等,之后再更新。

标签: 暂无
最后更新:2017年01月07日

愚墨

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

搜搜看看
历史遗迹
  • 2023年5月
  • 2022年9月
  • 2022年3月
  • 2022年2月
  • 2021年12月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年9月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年5月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年9月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年11月
  • 2017年7月
  • 2017年6月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年6月
  • 2015年4月

COPYRIGHT © 2020 愚墨的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS