一样直接上完整代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.dashboard_target_box {
width: 250px;
height: 105px;
border: 3px dashed #E5E5E5;
text-align: center;
position: absolute;
z-index: 2000;
top: 0;
left: 0;
cursor: pointer
}
.dashboard_target_box.over {
border: 3px dashed #000;
background: #ffa
}
.dashboard_target_messages_container {
display: inline-block;
margin: 12px 0 0;
position: relative;
text-align: center;
height: 44px;
overflow: hidden;
z-index: 2000
}
.dashboard_target_box_message {
position: relative;
margin: 4px auto;
font: 15px/18px helvetica, arial, sans-serif;
font-size: 15px;
color: #999;
font-weight: normal;
width: 150px;
line-height: 20px
}
.dashboard_target_box.over #dtb-msg1 {
color: #000;
font-weight: bold
}
.dashboard_target_box.over #dtb-msg3 {
color: #ffa;
border-color: #ffa
}
#dtb-msg2 {
color: orange
}
#dtb-msg3 {
display: block;
border-top: 1px #EEE dotted;
padding: 8px 24px
}
</style>
</head>
<body>
<div id="target_box" class="dashboard_target_box">
<div id="drop_zone_home" class="dashboard_target_messages_container">
<p id="dtb-msg2" class="dashboard_target_box_message" style="top:-44px">选择你的图片<br>
开始上传</p>
<p id="dtb-msg1" class="dashboard_target_box_message" style="top:-44px">拖动图片到<br>
这里</p>
</p>
</div>
<div>
<img alt="">
</div>
</div>
<script>
window.onload = function () {
var box = document.getElementById('target_box'); //获得到框体
//要想实现拖拽，首页需要阻止浏览器默认行为
// box.addEventListener("dragleave", function (e) {
// e.preventDefault();
// }); //拖离
// box.addEventListener("dragenter", function (e) {
// e.preventDefault();
// }); //拖进
box.addEventListener("dragover", function (e) {
e.preventDefault();
}); //拖动,主要是对dragover进行阻止
box.addEventListener("drop", function (e) {
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//fileList.length 用来获取文件的长度（其实是获得文件数量）
//检测是否是拖拽文件到页面的操作
if (fileList.length == 0) {
return;
}
//检测文件是不是图片
if (fileList[0].type.indexOf('image') === -1) {
return;
}
var div = document.createElement('div');
var i = document.createElement('img');
// i.src = window.URL.createObjectURL(fileList[0]);//调用 URL 对象的 createObjectURL 方法，传入一个 File 对象或者 Blob 对象，能生成一个链接
//或者使用FileReader
var reader = new FileReader();
var is = reader.readAsDataURL(fileList[0])//读取数据之后 触发onload
reader.onload = function () {
var dataURL = reader.result;
i.src = dataURL;
}
div.appendChild(i);
document.querySelector('#target_box').appendChild(div);
//var img = window.webkitURL.createObjectURL(fileList[0]);
//拖拉图片到浏览器，可以实现预览功能
// xhr = new XMLHttpRequest();
// xhr.open("post", "test.php", true);
// xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
// var fd = new FormData();
// fd.append('ff', fileList[0]);
// xhr.send(fd);
}, false);
}
</script>
</body>
</html>
网友评论