So verwenden Sie JS zum Ziehen und Ablegen von Dateien zum Hochladen-js-Tutorial-php.cn

So verwenden Sie JS zum Ziehen und Ablegen von Dateien zum Hochladen

php中世界最好的语言

Freigeben： 2018-05-28 14:59:16

Original

1929 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie JS zum Hochladen von Dateien per Drag-and-Drop verwenden und welche Vorsichtsmaßnahmen es gibt, um Dateien per Drag-and-Drop zum Hochladen zu verwenden. Hier ist ein praktischer Fall Schauen Sie mal rein.

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Vue, um die AdminLTE-Vorlage zu integrieren

Wie man ein Tic-Tac-Toe macht Spiel mit JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS zum Ziehen und Ablegen von Dateien zum Hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!