recherche

Maison >interface Web >js tutoriel >Explication détaillée des étapes de mise en œuvre du téléchargement par glisser-déposer de fichiers à l'aide de JS

Explication détaillée des étapes de mise en œuvre du téléchargement par glisser-déposer de fichiers à l'aide de JS

php中世界最好的语言
php中世界最好的语言original
2018-05-23 10:04:502341parcourir

Cet article présente principalement la fonction de téléchargement par glisser-déposer de fichiers implémentée par JS, impliquant le déclenchement d'événements javascript, la modification dynamique des attributs des éléments de page et d'autres techniques de fonctionnement associées. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit la fonction de téléchargement de fichiers par glisser-déposer implémentée par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants : 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS文件拖拽上传</title>
<style>
p{
 width: 300px;
 height: 300px;
 border:1px dashed #000;
 position:absolute;
 top: 50%;
 left: 50%;
 margin:-150px 0 0 -150px;
 text-align:center;
 font:20px/300px '微软雅黑';
 display:none;
}
</style>
<script>
 window.onload = function () {
  var oBox = document.getElementById('box');
  var oM = document.getElementById('m1');
  var timer = null;
  document.ondragover = function(){
   clearTimeout(timer);
   timer = setTimeout(function(){
    oBox.style.display = 'none';
   },200);
   oBox.style.display = 'block';
  };
  //进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会
  oBox.ondragenter = function(){
   oBox.innerHTML = '请释放鼠标';
  };
  oBox.ondragover = function(){
   return false;
  };
  oBox.ondragleave = function(){
   oBox.innerHTML = '请将文件拖拽到此区域';
  };
  oBox.ondrop = function(ev){
   var oFile = ev.dataTransfer.files[0];
   var reader = new FileReader();
   //读取成功
   reader.onload = function(){
    console.log(reader);
   };
   reader.onloadstart = function(){
    alert('读取开始');
   };
   reader.onloadend = function(){
    alert('读取结束');
   };
   reader.onabort = function(){
    alert('中断');
   };
   reader.onerror = function(){
    alert('读取失败');
   };
   reader.onprogress = function(ev){
    var scale = ev.loaded/ev.total;
    if(scale>=0.5){
     alert(1);
     reader.abort();
    }
    oM.value = scale*100;
   };
   reader.readAsDataURL(oFile,'base64');
   return false;
  };
 };
</script>
</head>
<body>
<meter id="m1" value="0" min="0" max="100"></meter>
 <p id="box">请将文件拖拽到此区域</p>
</body>
</html>
Utilisez http://tools.jb51.net/code/HtmlJsRun pour exécuter le test en ligne et les résultats sont les suivants :

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 prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des cas d'utilisation de la fonction de rappel JavaScript

Quelles sont les précautions d'utilisation de React Navigation

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!

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：ajax implémente la fonction de téléchargement de fichiers ou d'images asynchronesArticle suivant：ajax implémente la fonction de téléchargement de fichiers ou d'images asynchrones

Articles Liés

Voir plus