Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Schritte zum Implementieren des Datei-Drag-and-Drop-Uploads mit JS

Ausführliche Erläuterung der Schritte zum Implementieren des Datei-Drag-and-Drop-Uploads mit JS

php中世界最好的语言Original: 2018-05-23 10:04:502323Durchsuche

In diesem Artikel wird hauptsächlich die von JS implementierte Datei-Drag-and-Drop-Upload-Funktion vorgestellt, die das Auslösen von Javascript-Ereignissen, die dynamische Änderung von Seitenelementattributen und andere verwandte Bedientechniken umfasst.

Das Beispiel in diesem Artikel beschreibt die von JS implementierte Datei-Drag-and-Drop-Upload-Funktion. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS文件拖拽上传</title>
<style>
p{
 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>
 <p id="box">请将文件拖拽到此区域</p>
</body>
</html>

Verwenden Sie http://tools.jb51.net/code/HtmlJsRun, um den Test online auszuführen. Die Ergebnisse lauten wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Anwendungsfälle von JavaScript-Rückruffunktionen

Welche Vorsichtsmaßnahmen sind für die Verwendung von React Navigation zu beachten?

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum Implementieren des Datei-Drag-and-Drop-Uploads mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ajax implementiert die asynchrone Datei- oder Bild-Upload-FunktionNächster Artikel：Ajax implementiert die asynchrone Datei- oder Bild-Upload-Funktion

In Verbindung stehende Artikel

Mehr sehen