拖动文件到HTML,关于javascript:HTML-JS-拖动文件的操作Drop-的使用-js-html-H5

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 元素,再解决须要实现的性能。

要实现拖动文件的操作,须要进行以下步骤:

指定 drop 到的元素

解决 ondrop 事件

一、 指定 drop 到的元素

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

οndrοp="handleDrag(event)"

id="dropZone">

二、解决相应的事件

ondragover 当拖动到此元素时,但还没有开释

ondragleave 当来到此元素时

ondragend 拖动完结时

ondrop 到指定元素开释拖动操作时

这里咱们次要须要解决两个事件, ondrop 和 ondragover

ondragover 解决拖动中的界面反馈

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

οndrοp="handleDrag(event)"

οndragleave="handleDragEnd()"

οndragend="handleDragEnd()"

οndragοver="handleDragOver(event)"

id="dropZone">

function handleDragOver(event){

$('.container').classList.add('on-hover')

}

ondrop 解决开释鼠标时的文件操作

ondrop 就是在你开释鼠标时候会触发的事件,这里就写你须要解决的货色就能够了。

event 里有个 dataTransfer 外面蕴含着这些拖动的文件列表 files items

你能够间接应用 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/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值