实现效果：
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>
网友评论