HTML5 js implémente la fonction de téléchargement de fichiers par glisser-déposer-Tutoriel H5-php.cn

HTML5 js implémente la fonction de téléchargement de fichiers par glisser-déposer

高洛峰

Libérer： 2017-01-12 17:09:20

original

1607 Les gens l'ont consulté

De nombreuses fonctions ont été implémentées sur le PC HTML5, et le téléchargement par glisser-déposer est également utilisé dans mon travail. J'ai spécialement enregistré cette fonction

Déclencher un événement (élément source) sur le PC. drag target :

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 de faire glisser l'élément

Se déclenche lorsque la cible est relâchée Événements :

ondragenter - Cet événement est déclenché lorsque l'objet glissé par la souris entre dans la portée de son conteneur
ondragover - Lorsqu'un objet glissé est glissé dans la portée du conteneur d'un autre objet Cet événement est déclenché lors du déplacement
ondragleave - Cet événement est déclenché lorsque l'objet glissé par la souris quitte la portée de son conteneur
ondrop - Cet événement est déclenché lorsque le bouton de la souris est libéré lors d'un processus de glissement

Le code ci-dessus

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

Copier après la connexion

Cette fonction est une méthode pour faire glisser des images dans les divs gauche et droit. Je ne pense pas que ce soit utile. être utilisé comme une bière Harbin
Ce qui suit est le code de téléchargement par glisser-déposer, backend Une fois que PHP a obtenu $_FILES, il peut être démarré

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

Copier après la connexion

Ce qui précède est tout le contenu de cet article. j'espère que cela sera utile à l'apprentissage de tout le monde, et j'espère également que tout le monde soutiendra le site Web PHP en chinois.

Pour plus d'articles liés à l'implémentation HTML5 js de la fonction de téléchargement de fichiers par glisser-déposer, veuillez faire attention au site Web PHP chinois !