Heim > Artikel > Web-Frontend > H5 ermöglicht das Hochladen von Dateien per Drag & Drop

H5 ermöglicht das Hochladen von Dateien per Drag & Drop

php中世界最好的语言Original: 2018-03-26 14:22:291905Durchsuche

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!

php html5 对象事件

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：H5 implementiert eine Touchscreen-Version des KarussellsNächster Artikel：H5 implementiert eine Touchscreen-Version des Karussells

In Verbindung stehende Artikel

Mehr sehen