html5 Das Hochladen von Dateien per Drag-and-Drop ist ein altes Thema. Der Code, den ich ursprünglich gefunden und geändert habe, wurde ebenfalls gefunden online, aber ich bin einfach auf ein paar getreten. Nach der Grube wollte ich den Vorgang aufzeichnen.
Funktionsimplementierung
Im Folgenden wird hauptsächlich die Implementierung des Ziehens von Dateien von außerhalb des Browsers in den Browser zum Hochladen vorgestellt. Zunächst werden einige notwendige Grundlagen vorgestellt.
Drag-Ereignisse umfassen Folgendes:
dragstart: Wird ausgelöst, wenn Der Benutzer beginnt mit dem Ziehen des -Objekts .
dragenter: Wird ausgelöst, wenn die Maus zum ersten Mal über das Zielelement fährt und gezogen wird. Der Listener für dieses Ereignis sollte angeben, ob das Löschen an dieser Stelle zulässig ist, oder ob der Listener keine Operation ausführt. Dann ist das Löschen standardmäßig nicht zulässig.
dragover: Wird ausgelöst, wenn die Maus über ein Element fährt und gezogen wird.
dragleave: Wird ausgelöst, wenn die Maus ein Element verlässt und gezogen wird.
drag: Wird jedes Mal ausgelöst, wenn die Maus beim Ziehen des Objekts bewegt wird.
drop: Dieses Ereignis wird für das Element ausgelöst, wenn am Ende des Ziehvorgangs ein Drop erfolgt. Der Listener sollte dafür verantwortlich sein, die gezogenen Daten abzurufen und an der Ablagestelle einzufügen.
dragend: Wird ausgelöst, wenn die Maustaste beim Ziehen des Objekts losgelassen wird.
Beim Ziehen von Dateien von außerhalb des Browsers in den Browser müssen folgende Ereignisse gebunden werden: dragover und drop, andere müssen nicht gebunden sein. dragover und drop Ereignisverarbeitungsfunktion müssen den <a href="http://www.php.cn/wiki/1074.html" target="_blank">prev <code style="font-family: 'Courier New', Courier, monospace; font-size: 1em; white-space: pre;"><a href="http://www.php.cn/wiki/1074.html" target="_blank">prev</a>entDefault()entDefault() -Funktion, andernfalls führt der Browser die Standardverarbeitung durch. Beispielsweise werden Textdateien direkt geöffnet und für Nicht-Textdateien wird möglicherweise ein Download-Dateifeld angezeigt.
DataTransfer-Objekt
Das Drag-Objekt wird zum Übertragen von Daten durch das Drag-Ereignis event.dataTransfer Get verwendet.
dataTransfer.dropEffect [ = value ]: Gibt den aktuell ausgewählten Vorgangstyp zurück. Neue Werte können festgelegt werden, um den ausgewählten Vorgang zu ändern. Optionale Werte sind: none, <a href="http://www.php.cn/wiki/1297.html" target="_blank">copy</a>, link, move .
dataTransfer.effectAllowed [ = value ]: Gibt den zulässigen Operationstyp zurück, der geändert werden kann. Optionale Werte sind: none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized .
dataTransfer.types: Gibt einen DOMString zurück, der alle im Dragstart-Ereignis festgelegten Formate auflistet. Wenn außerdem Dateien gezogen werden, lautet eine der Typzeichenfolgen „Dateien“.
dataTransfer.clearData( [ format ] ): Daten im angegebenen Format entfernen. Wenn das Argument weggelassen wird, werden alle Daten entfernt.
dataTransfer.setData(format, data): Angegebene Daten hinzufügen.
data = dataTransfer.getData(format): Gibt die angegebenen Daten zurück. Wenn keine solchen Daten vorhanden sind, wird eine leere Zeichenfolge zurückgegeben.
dataTransfer.files: Gibt die gezogene Dateiliste zurück, falls vorhanden.
dataTransfer.setDragImage(element, x, y): Verwenden Sie das angegebene Element, um das Drag-Feedback zu aktualisieren und das zuvor angegebene Feedback (Feedback) zu ersetzen.
dataTransfer.addElement(element): Fügt das angegebene Element zur Liste der Elemente hinzu, die zum Rendern von Drag-Feedback verwendet werden.
In diesem Anwendungsfall ist das Wichtigste das dataTransfer.files Attribut , das das ist Der Benutzer zieht in die Dateiliste des Browsers ein FileList-Objekt mit length -Attributen, auf das über Indizes zugegriffen werden kann.
FormData
FormData stellt ein Formular dar, das dem Formular über append('fieldName', value) hinzugefügt werden kann Funktion Fügt Parameter hinzu, bei denen es sich nicht nur um Zeichenfolgen, sondern auch um Dateiobjekte oder sogar Binärdaten handeln kann.
XMLHttpRequest Level 2
Neue Version des XMLHttpRequest-Objekts bezieht sich auf die neue Version.
XMLHttpRequest kann HTTP-Anfragen an Server mit unterschiedlichen Domänennamen stellen. Dies wird als „Cross-origin Ressourcen-Sharing, auch CORS genannt) bezeichnet.
Browser verfügen über eine berühmte Same-Origin-Richtlinie, die die Grundlage der Browsersicherheit bildet. Zusätzlich zur Browserunterstützung erfordert CORS auch die Zustimmung des Servers.
XMLHttpRequest unterstützt das direkte Senden von FormData, genau wie der Browser die Formularübermittlung durchführt.
XMLHttpRequest unterstützt auch Fortschrittsinformationen (progress Ereignis ist in Upload-Fortschritt und Download-Fortschritt unterteilt). Objekt, das Download-Fortschrittsereignis befindet sich im XMLHttpRequest.upload -Objekt. Jedes Fortschrittsereignis hat drei Eigenschaften: XMLHttpRequest
: Zählbare Anzahl der hochgeladenen Bytes lengthComputable
total
-
loaded
Zusätzlich zu Fortschrittsereignissen werden auch die folgenden fünf Ereignisse unterstützt:
Ereignis: Übertragung erfolgreich abgeschlossen. load
abort
error
loadstart
-
ist dasselbe wie das progress-Ereignis. Die -Ereignisverarbeitungsfunktion , die zum Upload-Vorgang gehört, ist an das XMLHttpRequest.upload-Objekt gebunden Das Attribut download ist direkt an das Objekt XMLHttpRequest gebunden.
Spezifischer Code
Achten Sie beim Testen auf Ihrem eigenen Computer darauf, den Pfad im Code unten in Ihren eigenen zu ändern.
Serverseite
Die Serverseite muss ein Servlet schreiben, um das hochgeladene Formular zu empfangen.
/html5/FileUploadServlet
Es kann mithilfe der @MultipartConfig-Annotation von servlet3 schnell implementiert werden.
Client-Code
<html>
<head>
<title> drag drop upload demo
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<p id= "progressBarZone">请将文件拖拽进浏览器内！ <br/></ p>
</body>
<script>
var progressBarZone = document.getElementById('progressBarZone');
function sendFile(files) {
if (!files || files.length < 1) {
return;
}
var percent = document.createElement('p' );
progressBarZone.appendChild(percent);
var formData = new FormData(); // 创建一个表单对象FormData
formData.append( 'submit', '中文' ); // 往表单对象添加文本字段
var fileNames = '' ;
for ( var i = 0; i < files.length; i++) {
var file = files[i]; // file 对象有 name, size 属性
formData.append( 'file[' + i + ']' , file); // 往FormData对象添加File对象
fileNames += '《' + file.name + '》， ' ;
}
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener( 'progress',
function uploadProgress(evt) {
// evt 有三个属性：
// lengthComputable – 可计算的已上传字节数
// total – 总的字节数
// loaded – 到目前为止上传的字节数
if (evt.lengthComputable) {
percent.innerHTML = fileNames + ' upload percent :' + Math.round((evt.loaded / evt.total) * 100) + '%
' ;
}
}, false); // false表示在事件冒泡阶段处理
xhr.upload.onload = function() {
percent.innerHTML = fileNames + '上传完成。
' ;
};
xhr.upload.onerror = function(e) {
percent.innerHTML = fileNames + ' 上传失败。
' ;
};
xhr.open( 'post', 'http://cross.site.com:8080/html5/FileUploadServlet' , true);
xhr.send(formData);
// 发送表单对象。
}
document.addEventListener("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
// 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
}, false);
document.addEventListener("drop", function(e) {
e.stopPropagation();
e.preventDefault();
// 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
sendFile(e.dataTransfer.files);
}, false);
</script>
</html>Nach dem Login kopieren
Wenn die oben genannten Codes alle auf derselben Website bereitgestellt werden, gibt es kein Problem. Der Upload-Vorgang, den ich durchführen möchte, besteht jedoch darin, die Datei auf eine andere Website zu übertragen, sodass eine Gefahr entsteht.
Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe für den Drag-and-Drop-Upload von HTML5-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
