實現效果：
<h4>涉及的知識點包括：</h4>
<b>1.拖拽</b>
設置成true，元素就可以拖拽
拖拽元素事件
<pre>
dragstart
drag
dragend
</pre>目標元素事件
<pre>
dragenter
dragover
dragleave
drop<li>釋放元素需要設置dragover的阻止默認</li><li>防止新文件下載需要設置成阻止默認</li>
</pre>
<b>2.dataTransfer對象</b>
<ol>
<li>用來保存被拖動的數據</li><li>files
2.1 包含一個在數據傳輸上所有可用的本地文件列表
2.2 包含name、size、type等屬性
</li></ol>
<b>3.FormData對象</b>
<ol>
<li>通過鍵值對的方式，來模擬表單控件的異步上傳方式</li><li>append()
</li></ol>
<b>4.Ajax2</b></br>
<pre>
onload
responseType
response
ontimeout
timeout
</pre><b>xhr.upload.onprogress</b>
<ol>
<li>ev.loaded：當前上傳量 B(字節(jié))-變化的量至到總量</li><li>ev.total：上傳總量 B(字節(jié))-上傳文件的大小</li><li>注意大文件上傳需要修改php.ini的上傳大小限制</li></ol><ol><li>檢測觸發(fā)區(qū)域
</li><li>進度條實現</li><li>上傳量換算</li><li>上傳時間換算</li>
</ol>
實例代碼：
file2.php文件：
<pre><?PHP
$fs = $_FILES['fileName'];
echo json_encode($fs);
?></pre>
<pre>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
body{ font-size:40px;}
dragBox{ width:500px; height:200px; border:1px #000 solid;}
dragProgress{ display:none;}
dragSuccess{ display:none;}
progressBar{ width:300px; height:50px; background:gray;}
progressUpBar{ width:0%; height:100%; background:blue;}
progressValue{}
</style>
</head>
<body>
<div id="dragBox">請拖拽到此區(qū)域！！！</div>
<div id="dragProgress">
<div id="progressBar">
<div id="progressUpBar"></div>
</div>
<div id="progressValue">0/s</div>
<div id="progressTime">00:00:00</div>
</div>
<div id="dragSuccess"></div>
<script>
var oDragBox = document.getElementById('dragBox');
var oDragProgress = document.getElementById('dragProgress');
var oDragSuccess = document.getElementById('dragSuccess');
var oProgressBar = document.getElementById('progressBar');
var oProgressUpBar = document.getElementById('progressUpBar');
var oProgressValue = document.getElementById('progressValue');
var oProgressTime = document.getElementById('progressTime');
oDragBox.ondragenter = function(){
this.innerHTML = '可以釋放啦！！！！';
};
oDragBox.ondragover = function(ev){
ev.preventDefault(); //阻止默認事件，這樣drop事件就可以觸發(fā)了
};
oDragBox.ondragleave = function(){
this.innerHTML = '請拖拽到此區(qū)域！！！';
};
oDragBox.ondrop = function(ev){ //在目標元素上釋放觸發(fā)的事件
oDragProgress.style.display = 'block';
oDragSuccess.style.display = 'none';
//console.log( ev.dataTransfer ); //用來保存被拖動的數據
var fs = ev.dataTransfer.files[0]; //files文件列表在此是一個文件上傳
var fd = new FormData();
var startTime = now();
var startValue = 0;
fd.append('fileName',fs);
//ajax2 : onload(檢測ajax過程的完成階段)跟onreadystatechange比較類似的
var xhr = new XMLHttpRequest();
xhr.open('POST','file2.php',true);
xhr.responseType = 'json';
xhr.onload = function(){
if(xhr.status == 200){
var data = xhr.response;
//console.log(data);
oDragProgress.style.display = 'none';
oDragSuccess.style.display = 'block';
oDragSuccess.innerHTML = data.name + ' <a href="#">刪除</a>';
}
};
xhr.upload.onprogress = function(ev){
var loaded = ev.loaded;
var total = ev.total;
var changeTime = now();
if(changeTime - startTime > 1000){
startTime = changeTime;
var changeValue = loaded - startValue;
var surplusValue = total - loaded;
startValue = loaded;
oProgressValue.innerHTML = formatValue(changeValue,'K');
oProgressTime.innerHTML = formatTime(surplusValue / changeValue);
}
oProgressUpBar.style.width = loaded / total * 100 + '%';
};
xhr.send(fd);
ev.preventDefault(); //防止拖拽的文件在瀏覽器下默認打開或者下載
};
function formatValue(v,t){
v = v / 1024;
if(v > 1024){
return formatValue(v , 'M');
}
else{
return v.toFixed(2) + t + '/s';
}
}
function formatTime(t){
var iH = Math.floor(t/3600);
var iM = Math.floor(t%3600/60);
var iS = Math.floor(t%60);
return toZero(iH) + ":" + toZero(iM) + ":" + toZero(iS);
}
function toZero(n){
if(n<10){
return '0' + n;
}
else{
return '' + n;
}
}
function now(){
return (new Date()).getTime();
}
</script>
</body>
</html>
</pre>
