溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用JavaScript如何實現一個文件拖拽上傳功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
具體如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net JS文件拖拽上傳</title>
<style>
div{
width: 300px;
height: 300px;
border:1px dashed #000;
position:absolute;
top: 50%;
left: 50%;
margin:-150px 0 0 -150px;
text-align:center;
font:20px/300px '微軟雅黑';
display:none;
}
</style>
<script>
window.onload = function () {
var oBox = document.getElementById('box');
var oM = document.getElementById('m1');
var timer = null;
document.ondragover = function(){
clearTimeout(timer);
timer = setTimeout(function(){
oBox.style.display = 'none';
},200);
oBox.style.display = 'block';
};
//進入子集的時候 會觸發ondragover 頻繁觸發 不給ondrop機會
oBox.ondragenter = function(){
oBox.innerHTML = '請釋放鼠標';
};
oBox.ondragover = function(){
return false;
};
oBox.ondragleave = function(){
oBox.innerHTML = '請將文件拖拽到此區域';
};
oBox.ondrop = function(ev){
var oFile = ev.dataTransfer.files[0];
var reader = new FileReader();
//讀取成功
reader.onload = function(){
console.log(reader);
};
reader.onloadstart = function(){
alert('讀取開始');
};
reader.onloadend = function(){
alert('讀取結束');
};
reader.onabort = function(){
alert('中斷');
};
reader.onerror = function(){
alert('讀取失敗');
};
reader.onprogress = function(ev){
var scale = ev.loaded/ev.total;
if(scale>=0.5){
alert(1);
reader.abort();
}
oM.value = scale*100;
};
reader.readAsDataURL(oFile,'base64');
return false;
};
};
</script>
</head>
<body>
<meter id="m1" value="0" min="0" max="100"></meter>
<div id="box">請將文件拖拽到此區域</div>
</body>
</html>以上就是使用JavaScript如何實現一個文件拖拽上傳功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
