Heim >Web-Frontend >H5-Tutorial >H5 ermöglicht das Hochladen von Dateien per Drag & Drop
Dieses Mal bringe ich Ihnen H5 zum Drag-and-Drop zum Hochladen von Dateien. Was sind die Vorsichtsmaßnahmen für H5 zum Drag-and-Drop zum Hochladen von Dateien?
Ich habe ziemlich viele Funktionen auf dem HTML5-PC implementiert. Ich verwende in meiner Arbeit auch diese Funktion.
Trigger Ereignisse auf dem Ziehziel (Quellelement):
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 den Vorgang abschließt. Ausgelöst, nachdem das Element gezogen wurde
Ereignisse, die ausgelöst werden, wenn das Ziel losgelassen wird:
ondragenter – wenn das mit der Maus gezogene Objekt in seinen Containerbereich gelangt. Dieses Ereignis wird ausgelöst, wenn
ondragover – Dieses Ereignis wird ausgelöst, wenn ein gezogenes Objekt in den Container eines anderen Objekts gezogen wird.
ondragleave – Wenn das Objekt, das mit der Maus gezogen wird, verlässt seinen Container. Dieses Ereignis wird ausgelöst, wenn es innerhalb des Bereichs
ondrop – Während eines Ziehvorgangs wird dieses Ereignis ausgelöst, wenn die Maustaste losgelassen wird
Der Code oben
<html lang="en"> <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> <p id="box1" class="box"></p> <p id="box2" class="box"></p> <img id="img1" src="1.jpg"> <p id="msg"></p> </body> <script> var box1p,box2p,msgp,img1; window.onload = function(){ box1p = document.getElementById('box1'); box2p = document.getElementById('box2'); msgp = document.getElementById('msg'); img1 = document.getElementById('img1'); box1p.ondragover = function(e){e.preventDefault();} box2p.ondragover = function(e){e.preventDefault();} img1.ondragstart = function(e){e.dataTransfer.setData('imgId','img1');} box1p.ondrop = dropImghandler; box2p.ondrop = dropImghandler; } function dropImghandler(e){ showObj(e);//获取拖放所有信息 showObj(e.dataTransfer);//获取文件 e.preventDefault(); var img = document.getElementById(e.dataTransfer.getData('imgId')); e.target.appendChild(img); } function showObj(obj){ var s = ''; for(var k in obj){s += k+":"+obj[k]+"<br/>";} msgp.innerHTML = s; } </script> </html>
Diese Funktion kann meiner Meinung nach nicht sehr nützlich sein, wenn Bilder nach links und rechts gezogen werden. Sie kann als Harbin-Beer verwendet werden.
Das Folgende ist die Nachdem das Back-End-PHP $_FILES erhalten hat, kann es gestartet werden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖放上传</title> <style> #imgContainer{background:#ccc;width:500px;height:500px;} </style> </head> <body> <p id="imgContainer"></p> <p id="msg"></p> </body> <script> var imgContainer,msgp; window.onload = function(e){ imgContainer = document.getElementById('imgContainer'); msgp = document.getElementById('msg'); 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 = ''; for(var k in obj){s += k+":"+obj[k]+"<br/>";} msgp.innerHTML = s; } </script> </html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So verwenden Sie die Einschränkungsüberprüfungs-API in H5
postMessage zur domänen- und übergreifenden Implementierung -Fensternachrichten
Das obige ist der detaillierte Inhalt vonH5 ermöglicht das Hochladen von Dateien per Drag & Drop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!