拖拽上传图片

HTML
<div class=“center” id=“TagBox”>
<img src=“javascript:;” alt="">
<p id=“text”>拖动图片到此 </p>
</div>

Sass

@charset"utf-8";

.center{
    margin: auto;
    width: 500px;
    height: 400px;
    border: 1px dashed #ddd;
    margin-top: 10%;
    position: relative;

    img{
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
    }

    p{
        line-height: 400px;
        position: absolute;
        text-align: center;
        width: 100%;
        height: 100%;
    }
}

var el = document.getElementById(‘TagBox’),// 上传文件区域
te = document.getElementById(“text”),文本
img = document.querySelector(“img”)[0];显示图片

首先阻止浏览器默认拖入打开文件
el.ondragover = function () {
return false;
};

文件拖入放下执行
el.ondrop = function (ev) { };
获取上传的文件
var oFile = ev.dataTransfer.files[0];
读取文件接口
var reader = new FileReader();

el.ondrop = function (ev) {
var oFile = ev.dataTransfer.files[0];
var reader = new FileReader();
读取文件接口开始读取文件时执行
reader.onload = function (KaTeX parse error: Expected '}', got 'EOF' at end of input: …ttribute("src",e.currentTarget.result)显示上传的图片
}
读取文件
reader.readAsDataURL(oFile, ‘base64’);
return false;
};

效果图