Heim >Web-Frontend >js-Tutorial >So ziehen Sie Dateien in JavaScript per Drag & Drop
So ziehen Sie Dateien in JavaScript per Drag & Drop
- 不言Original
- 2018-12-01 11:13:402682Durchsuche
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.
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('output').innerHTML += files[i].name + '(' + files[i].size + ') '
+ files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() + ' - ' + files[i].type + '<br/>';
}
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
function PageLoad(evt) {
var dropFrame = document.getElementById('DropFrame');
dropFrame.addEventListener('dragover', handleDragOver, false);
dropFrame.addEventListener('drop', 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>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. 
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 = 'copy';
}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!