好资源导航 » 文章资讯 » js实现本地图片文件拖拽效果

js实现本地图片文件拖拽效果

2024-01-27 09:40:03 291

如何拖拽文件到指定位置，具体方法如下

在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上代码

完整代码：





Document




拖动你的图片到这里

vardropBox; window.onload=function(){ dropBox=document.getElementById("dropBox"); //鼠标进入放置区时 dropBox.ondragenter=ignoreDrag; //拖动文件的鼠标指针位置放置区之上时发生 dropBox.ondragover=ignoreDrag; dropBox.ondrop=drop; } functionignoreDrag(e){ //确保其他元素不会取得该事件 e.stopPropagation(); e.preventDefault(); } functiondrop(e){ e.stopPropagation(); e.preventDefault(); //取得拖放进来的文件 vardata=e.dataTransfer; varfiles=data.files; //将其传给真正的处理文件的函数 varfile=files[0]; varreader=newFileReader(); reader.onload=function(e){ dropBox.style.backgroundImage="url('"+e.target.result+"')"; } reader.readAsDataURL(file); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js实现本地图片文件拖拽效果

热门推荐

随机推荐