Im Jahr 2018 kann eine Website mit einfachem JavaScript Dateien hochladen, wie es Google Mail für E-Mail-Anhänge tut. Mit einem einzigen Klick kann der Datei-Explorer des Webbrowsers aufgerufen werden. Eine separate Schaltfläche "Senden" ist nicht erforderlich, um den Upload zu starten. Der Trick ist die Verwendung eines versteckten HTML <input type="file"> Element.
Beispiel HTML und JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>File Upload</title>
<!-- Demo a button to upload files from a local computer to a web server. -->
</head>
<body>
<input type="file" id="inputFileElement" multiple style="display:none">
<button id="fileSelectButton">Select some files</button>
<script>
const fileSelectButton = document.getElementById("fileSelectButton");
const inputFileElement = document.getElementById("inputFileElement");
// When the user presses the upload button, simulate a click on the
// hidden <input type="file"> element so the web browser will show its
// file selection dialog.
fileSelectButton.addEventListener("click", function (e) {
if (inputFileElement) {
inputFileElement.click();
}
}, false);
// When the user selects one or more files on the local host,
// upload each file to the web server.
inputFileElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = inputFileElement.files;
const numFiles = fileList.length;
for (let i = 0; i < numFiles; i++) {
const file = fileList[i];
console.log("Starting to upload " + file.name);
sendFile(file);
}
}
// Asynchronously read and upload a file.
function sendFile(file) {
const uri ="serverUpload.php";
const xhr = new XMLHttpRequest();
const fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log("Finished uploading: " + xhr.responseText); // handle response.
}
};
fd.append('myFile', file);
// Initiate a multipart/form-data upload
xhr.send(fd);
}
</script>
</body>
</html>
PHP-Code:
<?php
if (isset($_FILES['myFile'])) {
// Example:
move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
echo $_FILES['myFile']['name'];
exit;
}
?>
Dies funktioniert mit Internet Explorer 11, Edge, Firefox, Chrome und Opera. Dieses Beispiel wurde abgeleitet von https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications
Für einen Fortschrittsbalken, siehe Wie man den Fortschritt von XMLHttpRequest erhält
13 Stimmen
Nur damit Sie es wissen: Google verwendet Flash in GMail, um dies zu erreichen. Wenn Sie mit der rechten Maustaste auf den Link "Datei anhängen" klicken, werden Sie feststellen, dass es sich um eine transparente SWF-Datei handelt. Außerdem gibt es Möglichkeiten, Dateien asynchron mit iFrames hochzuladen, wenn Sie Flash gar nicht verwenden möchten. Ajax unterstützt einfach keine binären Daten.
1 Stimmen
Ok, wenn Gmail Flash verwendet, wie können sie jetzt auch html5 Datei drag&drop unterstützen?