实现效果：

1.jpg

<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(字节)-变化的量至到总量</li><li>ev.total：上传总量 B(字节)-上传文件的大小</li><li>注意大文件上传需要修改php.ini的上传大小限制</li></ol><ol><li>检测触发区域
</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">请拖拽到此区域！！！</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事件就可以触发了
};
oDragBox.ondragleave = function(){
this.innerHTML = '请拖拽到此区域！！！';
};
oDragBox.ondrop = function(ev){ //在目标元素上释放触发的事件

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>

仿QQ邮箱上传文件