H5中拖拽图片显示并上传

07. 一月 2017 HTML5, JavaScript 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,具体请移步,这里就不多写了。

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

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


发表评论

电子邮件地址不会被公开。