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;
};
效果图