Maison > Article > interface Web > H5 réalise le téléchargement de fichiers par glisser-déposer

H5 réalise le téléchargement de fichiers par glisser-déposer

php中世界最好的语言original: 2018-03-26 14:22:291901parcourir

Cette fois, je vais vous présenter H5 pour glisser-déposer pour télécharger des fichiers. Quelles sont les précautions pour H5 pour glisser-déposer pour télécharger des fichiers. Ce qui suit est un cas pratique, jetons un coup d'œil.

J'ai implémenté pas mal de fonctions sur le PC HTML5. J'utilise également le téléchargement par glisser-déposer dans mon travail. J'ai spécialement enregistré cette fonction

Déclencheur. événements sur la cible du glisser (élément source) :

ondragstart - Se déclenche lorsque l'utilisateur commence à faire glisser l'élément

ondrag - Se déclenche lorsque l'élément est déplacé

ondragend - Se déclenche lorsque l'utilisateur termine Déclenché après le glissement de l'élément

Événements déclenchés lorsque la cible est relâchée :

ondragend - lorsque l'objet glissé par la souris entre dans sa plage de conteneur Cet événement est déclenché lorsque

ondragover - Cet événement est déclenché lorsqu'un objet glissé est glissé dans le conteneur d'un autre objet

ondragleave - Lorsque le l'objet glissé par la souris quitte son conteneur Cet événement est déclenché lorsqu'il est à portée

ondrop - Cet événement est déclenché lorsque le bouton de la souris est relâché lors d'un processus de glissement

Le code ci-dessus

<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>

Cette fonction peut être Je ne pense pas que la méthode de glisser des images vers la gauche et la droite ps soit très utile Elle peut être utilisée comme une bière Harbin

Ce qui suit est le glisser. et déposez le code de téléchargement. Une fois que le PHP back-end a obtenu $_FILES, il peut être démarré

<!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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site php chinois !

Lecture recommandée :

Comment utiliser l'API de vérification de contraintes dans H5

postMessage pour implémenter des applications multi-domaines et multi-domaines -messagerie fenêtre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php html5 对象事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：H5 implémente une version à écran tactile du carrouselArticle suivant：H5 implémente une version à écran tactile du carrousel

Articles Liés

Voir plus