So ziehen Sie Dateien in JavaScript per Drag & Drop-js-Tutorial-php.cn

So ziehen Sie Dateien in JavaScript per Drag & Drop

不言

Freigeben： 2018-12-01 11:13:40

Original

2582 Leute haben es durchsucht

Wie implementiert So ziehen Sie Dateien in So ziehen Sie Dateien in JavaScript per Drag & Drop per Drag & Drop Drag-and-Drop von Dateien? In diesem Artikel erfahren Sie, wie Sie mit So ziehen Sie Dateien in So ziehen Sie Dateien in JavaScript per Drag & Drop per Drag & Drop Dateien per Drag & Drop auswählen. Schauen wir uns den spezifischen Inhalt an.

So ziehen Sie Dateien in So ziehen Sie Dateien in JavaScript per Drag & Drop per Drag & Drop

Schauen wir uns ein Beispiel an

Der Code lautet wie folgt

SimpleDragDrop.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    function handleFileSelect(evt) {
      evt.stopPropagation();
      evt.preventDefault();      
var files = evt.dataTransfer.files; 
      var output = [];      
for (var i = 0; i < files.length; i++) {
        document.getElementById(&#39;output&#39;).innerHTML += files[i].name + &#39;(&#39; + files[i].size + &#39;) &#39;
          + files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() +  &#39; - &#39; + files[i].type + &#39;<br/>&#39;;
      }
    }    
function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = &#39;copy&#39;;
    }    
    function PageLoad(evt) {      
var dropFrame = document.getElementById(&#39;DropFrame&#39;);
      dropFrame.addEventListener(&#39;dragover&#39;, handleDragOver, false);
      dropFrame.addEventListener(&#39;drop&#39;, handleFileSelect, false);
    }  
</script>
</head>
<body onload="PageLoad();">
  <div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">把文件放在这里。</div>
  <div id="output"></div>
</body>
</html>

Nach dem Login kopieren

Anleitung :

Führen Sie nach dem Anzeigen der Seite die PageLoad()-Funktion des Onload-Ereignisses aus.
Rufen Sie document.getElementById() auf, um das Element des Bereichs abzurufen, der Drag & Drop akzeptiert. Während dieser Zeit werden wir den Div-Tag-Teil der „DropFrame“-ID so einstellen, dass er Drag-and-Drop-Vorgänge akzeptiert. Rufen Sie die Methode addEventListener() des erhaltenen Elements auf und fügen Sie die Ereignisse „Dragover“ und „Drop“ hinzu. Wenn im obigen Code das Ereignis „dragover“ auftritt, wird die Funktion „handleDragOver()“ ausgeführt, und wenn das Ereignis „drop“ auftritt, wird die Funktion „handleFileSelece()“ ausgeführt.

Führen Sie den folgenden Code in DrawOver aus .
stopPropagation, präventDefault bricht das vorhandene Verhalten ab. Geben Sie außerdem den Ergebnistyp in der dataTransfer.dropEffect-Eigenschaft an. Der in der Drop-Aktivität ausgeführte Code ist wie folgt (Der folgende Code ist eine Liste der von ddataTransfer.files gelöschten Dateien evt) Die Datei wird auf die gleiche Weise wie das Dateiauswahlfeld abgerufen und das Dateiobjekt wird im Namensattribut gespeichert.

Geben Sie den erhaltenen Wert aus Der im Drop-Ereignis ausgeführte Code lautet wie folgt: ddataTransfer.files löscht die Dateiliste und speichert sie Die Elemente des Arrays, z. B. das Dateiauswahlfeld, werden im Namensattribut und die Dateigröße gespeichert. Das Datum wird im LastModifiedDate gespeichert Der erhaltene Wert wird mit der ID = outpud ausgegeben. Das Ergebnis der Ausführung von

Drag & Drop von Dateien aus dem Explorer in diesen Bereich

Wenn Sie auswählen Wenn Sie mehrere Dateien gleichzeitig anzeigen, werden die per Drag & Drop verschobenen Dateien angezeigt. So ziehen Sie Dateien in So ziehen Sie Dateien in JavaScript per Drag & Drop per Drag & Drop

Hinzugefügt: Es gibt auch eine Möglichkeit, dies durch die Implementierung zu erreichen „ondragover“- und „ondrop“-Attribute im Tag ohne Verwendung von addEventListener() 🎜>

 function handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = &#39;copy&#39;;
    }

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo ziehen Sie Dateien in JavaScript per Drag & Drop. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!