HTML JS 拖动文件的操作,Drop 的使用 js html H5

KyleBing

HTML JS 拖动文件的操作,Drop 的使用 js html H5

MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

拖动文件的操作指的是拖动文件到指定 HTML 元素,再处理需要实现的功能。
要实现拖动文件的操作,需要进行以下步骤:

  1. 指定 drop 到的元素
  2. 处理 ondrop 事件

一、 指定 drop 到的元素

拖动文件时要把文件放置到的元素

<div class="container"
     ondrop="handleDrag(event)"
     id="dropZone">
</div>

二、处理相应的事件

  • ondragover 当拖动到此元素时,但还没有释放
  • ondragleave 当离开此元素时
  • ondragend 拖动结束时
  • ondrop 到指定元素释放拖动操作时

这里我们主要需要处理两个事件, ondropondragover

ondragover 处理拖动中的界面反馈

因为当拖动到对应接收文件的元素上时, dom 并不会发生变化,界面也不会有变化。但此时你需要给用户一个反馈,让其知道拖动操作是有效的,给用户一个反馈:背景色变化、文字提示等。 这些操作就需要在 ondragover 上进行。比如添加一个背景色变化的 class。


<div class="container"
     ondrop="handleDrag(event)"
     ondragleave="handleDragEnd()"
     ondragend="handleDragEnd()"
     ondragover="handleDragOver(event)"
     id="dropZone">
</div>

function handleDragOver(event){
  $('.container').classList.add('on-hover')
}

ondrop 处理释放鼠标时的文件操作

ondrop 就是在你释放鼠标时候会触发的事件,这里就写你需要处理的东西就可以了。
event 里有个 dataTransfer 里面包含着这些拖动的文件列表 files items

DropZone.png

你可以直接使用 event.dataTransfer.files 来获取文件列表,
你也可以使用 event.dataTransfer.items 来获取拖动的 item,再将其转化为 file 处理,这个可以从下面这个链接中查看例子,平常就直接使用 files 即可

MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

这里要注意,需要添加 event.preventDefaults() 来避免浏览器的默认动作:直接打开拖动的文件。

   function handleDragOver(event){
      $('.container').classList.add('on-hover')
   }
   
   function handleDragEnd(){
      $('.container').classList.remove('on-hover')
   }
   
   function handleDrag(event){
      handleDragEnd() // 去掉界面反馈
      event.preventDefault() // 避免浏览器默认打开拖动的文件的操作

      let files = event.dataTransfer.files;
      console.log(event)
      showFiles(files) // 去进行文件显示的操作
   }

例子

我写了个拖动图片查看图片的页面:

https://kylebing.cn/test/drop/

result.png

阅读 366

青枫ky
个人成长记录

前端,喜欢 Javascript scss,喜欢做一些实用的小工具

617 声望
12 粉丝
0 条评论
你知道吗?

前端,喜欢 Javascript scss,喜欢做一些实用的小工具

617 声望
12 粉丝
宣传栏