html拖拽本地资源,js实现本地图片文件拖拽效果

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

发布时间：2020-10-10 21:37:09

来源：脚本之家

阅读：65

作者：输出是最好的学习

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

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

完整代码：

Document

#dropBox{

width: 300px;

height: 300px;

border:1px solid red;

font-size: 40px;

text-align: center;

background: lightyellow;

background-repeat: no-repeat;

background-size: 100%;

}

#dropBox div{

margin:50px auto;

width: 140px;

}

拖动你的图片到这里

var dropBox;

window.οnlοad=function(){

dropBox = document.getElementById("dropBox");

// 鼠标进入放置区时

dropBox.ondragenter = ignoreDrag;

// 拖动文件的鼠标指针位置放置区之上时发生

dropBox.ondragover = ignoreDrag;

dropBox.ondrop = drop;

}

function ignoreDrag(e){

// 确保其他元素不会取得该事件

e.stopPropagation();

e.preventDefault();

}

function drop(e){

e.stopPropagation();

e.preventDefault();

// 取得拖放进来的文件

var data = e.dataTransfer;

var files = data.files;

// 将其传给真正的处理文件的函数

var file = files[0];

var reader = new FileReader();

reader.οnlοad=function(e){

dropBox.style.backgroundImage = "url('"+e.target.result+"')";

}

reader.readAsDataURL(file);

}

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