一樣直接上完整代碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</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>
開(kāi)始上傳</p>
<p id="dtb-msg1" class="dashboard_target_box_message" style="top:-44px">拖動(dòng)圖片到<br>
這里</p>
</p>
</div>
<div>
<img alt="">
</div>
</div>
<script>
window.onload = function () {
var box = document.getElementById('target_box'); //獲得到框體
//要想實(shí)現(xiàn)拖拽，首頁(yè)需要阻止瀏覽器默認(rèn)行為
// box.addEventListener("dragleave", function (e) {
// e.preventDefault();
// }); //拖離
// box.addEventListener("dragenter", function (e) {
// e.preventDefault();
// }); //拖進(jìn)
box.addEventListener("dragover", function (e) {
e.preventDefault();
}); //拖動(dòng),主要是對(duì)dragover進(jìn)行阻止
box.addEventListener("drop", function (e) {
e.preventDefault(); //取消默認(rèn)瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對(duì)象
//fileList.length 用來(lái)獲取文件的長(zhǎng)度（其實(shí)是獲得文件數(shù)量）
//檢測(cè)是否是拖拽文件到頁(yè)面的操作
if (fileList.length == 0) {
return;
}
//檢測(cè)文件是不是圖片
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]);//調(diào)用 URL 對(duì)象的 createObjectURL 方法，傳入一個(gè) File 對(duì)象或者 Blob 對(duì)象，能生成一個(gè)鏈接
//或者使用FileReader
var reader = new FileReader();
var is = reader.readAsDataURL(fileList[0])//讀取數(shù)據(jù)之后 觸發(fā)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]);
//拖拉圖片到瀏覽器典徘，可以實(shí)現(xiàn)預(yù)覽功能
// 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>
