Heim > Artikel > Web-Frontend > HTML5 js implementiert die Drag-and-Drop-Funktion zum Hochladen von Dateien

HTML5 js implementiert die Drag-and-Drop-Funktion zum Hochladen von Dateien

高洛峰Original: 2017-01-12 17:09:201454Durchsuche

Viele Funktionen wurden auf dem HTML5-PC implementiert, und Drag-and-Drop-Upload wird auch in meiner Arbeit verwendet. Ich habe diese Funktion speziell aufgezeichnet

Ein Ereignis (Quellelement) auf dem auslösen Drag-Ziel:

ondragstart – Wird ausgelöst, wenn der Benutzer mit dem Ziehen des Elements beginnt
ondrag – Wird ausgelöst, wenn das Element gezogen wird
ondragend – Wird ausgelöst, wenn der Benutzer das Ziehen des Elements abschließt

Wird ausgelöst, wenn das Ziel losgelassen wird. Ereignisse:

ondragenter – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt in den Bereich seines Containers gelangt.
ondragover – Wenn ein gezogenes Objekt vorhanden ist innerhalb des Bereichs des Containers eines anderen Objekts gezogen. Dieses Ereignis wird beim Verschieben ausgelöst.
ondragleave – Dieses Ereignis wird ausgelöst, wenn das mit der Maus gezogene Objekt den Bereich seines Containers verlässt.
ondrop – Dieses Ereignis wird ausgelöst, wenn die Maustaste gedrückt wird wird während eines Ziehvorgangs freigegeben

Der obige Code

<html>
<head>
  <meta charset="UTF-8">
  <title>拖拽</title>
  <style>
    .box{width:800px;height:600px;float:left;}
    #box1{background-color:#ccc;}
    #box2{background-color:#000;}
  </style>
</head>
<body>
  <div id="box1"></div>
  <div id="box2"></div>
  <img id="img1" src="1.jpg">
  <div id="msg"></div>
</body>
<script>
var box1Div,box2Div,msgDiv,img1; 
window.onload = function(){
  box1Div = document.getElementById(&#39;box1&#39;);
  box2Div = document.getElementById(&#39;box2&#39;);
  msgDiv = document.getElementById(&#39;msg&#39;);
  img1 = document.getElementById(&#39;img1&#39;);
  box1Div.ondragover = function(e){e.preventDefault();}
  box2Div.ondragover = function(e){e.preventDefault();}
 
  img1.ondragstart = function(e){e.dataTransfer.setData(&#39;imgId&#39;,&#39;img1&#39;);}
  box1Div.ondrop = dropImghandler;
  box2Div.ondrop = dropImghandler;
}
function dropImghandler(e){
  showObj(e);//获取拖放所有信息
  showObj(e.dataTransfer);//获取文件
  e.preventDefault();
  var img = document.getElementById(e.dataTransfer.getData(&#39;imgId&#39;));
  e.target.appendChild(img);
}
function showObj(obj){
  var s = &#39;&#39;;
  for(var k in obj){s += k+":"+obj[k]+"<br/>";}
  msgDiv.innerHTML = s;
}
</script>
</html>

Diese Funktion ist eine Methode zum Ziehen von Bildern in die linken und rechten Divs. Ich glaube nicht, dass sie nützlich ist als Harbin Beer verwendet werden
Das Folgende ist der Drag-and-Drop-Upload-Code, Backend Nachdem PHP $_FILES erhalten hat, kann es gestartet werden

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>拖放上传</title>
  <style>
    #imgContainer{background:#ccc;width:500px;height:500px;}
  </style>
</head>
<body>
  <div id="imgContainer"></div>
  <div id="msg"></div>
</body>
<script>
var imgContainer,msgDiv;
window.onload = function(e){
  imgContainer = document.getElementById(&#39;imgContainer&#39;);
  msgDiv = document.getElementById(&#39;msg&#39;);
  imgContainer.ondragover = function(e){
    e.preventDefault();
  }
  imgContainer.ondrop = function(e){
    e.preventDefault();
    var f = e.dataTransfer.files[0];  
    //这时已经获取到文件了，具体想要用第几个文件自己处理，发post请求后端处理就行了！
 
    //下面是图片获取到之后显示在imgContainer中的流程
    // var fileReader = new FileReader();
    // fileReader.onload=function(){
    // imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"
    // }
    // fileReader.readAsDataURL(f);
    // showObj(e);  //显示上传信息
    // showObj(e.dataTransfer.files);
  }
}
function showObj(obj){
  var s = &#39;&#39;;
  for(var k in obj){s += k+":"+obj[k]+"<br/>";}
  msgDiv.innerHTML = s;
}
</script>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels I Ich hoffe, dass es allen beim Lernen hilft, und ich hoffe auch, dass alle die chinesische PHP-Website unterstützen.

Weitere Artikel zur Implementierung der Drag-and-Drop-Datei-Upload-Funktion in HTML5 js finden Sie auf der chinesischen PHP-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：Nodejs+express+html5 implementiert Drag-and-Drop-UploadNächster Artikel：Nodejs+express+html5 implementiert Drag-and-Drop-Upload

In Verbindung stehende Artikel

Mehr sehen