实现拖拽图片（文件）到网页

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

看图片上传插件都可以实现拖拽进html实现挺炫酷，研究下原理，网上找了一个案例，做一下记录，以备不时之需。

1 简单来一段html，这里就简单写个例子，主要是关注其原理。

<div id="dropBox"> 
<div>拖动你的图片到这里</div> 
</div>

2 再简单写个样式，css如下：

 
#dropBox{ 
    width: 300px; 
    height: 100px; 
    border:1px solid #000; 
    font-size: 14px; 
    text-align: center; 
    background: olive; 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 
#dropBox div{ 
    margin:10px auto; 
    width: 140px; 
} 

3 大概就是这样的

4 接下来就是逻辑的实现了 核心逻辑其实很简单，就是一个datatransfer

var dropBox; 
window.onload=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; // 将其传给真正的处理文件的函数 
    for (let item of files){ 
        var file = item; 
        var reader = new FileReader(); 
        reader.onload=function(e){ // dropBox.style.backgroundImage = "url('"+e.target.result+"')"; 
            let img =document.createElement('img') 
            img.src = e.target.result; document.body.appendChild(img) 
        } reader.readAsDataURL(file); 
    }
}

这样基本就实现了一个简单的demo呢。 拖拽一个图片进来，成功了呢

看看控制台的打印返回 e.dataTransfer

DataTransfer {dropEffect: 'none', effectAllowed: 'all', items: DataTransferItemList, types: Array(1), files: FileList}

里边的files就是拿到的文件列表，可利用这个数据来做逻辑处理

搞定，是不是还挺简单的，js事件里的东西还是挺多的，平时用到的还是比较少，还是需要多看红宝书啊。