JS實現的文件拖拽上傳功能示例

2019-11-19 13:48:43

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS實現的文件拖拽上傳功能。分享給大家供大家參考，具體如下：

<!doctype html><html><head><meta charset="utf-8"><title>www.survivalescaperooms.com 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>

使用http://tools.VeVB.COm/code/HtmlJsRun在線運行測試效果如下：