Für eine Erweiterung meiner Webcamseiten, benötigte ich ein Formular mit Bild-Upload-Funktion. Das Hochladen von Dateien ist eine der häufigsten Funktionen für eine Webanwendung. Ich verwende in meinem Beispiel KEINE der vielen JavaScript-Bibliotheken, sondern die Fetch-API (eine native JavaScript Funktion).
Als erstes benötigt man auf der Webseite ein HTML Formular mit einem Eingabeelement:
...
<form action="xyz.php" name="melderForm" method="post" enctype="multipart/form-data">
...
<input id="formMelderImage-file" class="form-control" type="file">
...
</form>
Mit dem folgenden JavaScript Code wird ein Event-Listener hinzugefügt, wenn der Benutzer eine Datei auswählt. Mit der Methode fileUpload () wird ein Dateiobjekt als Eingabe empfangen und es mit fetch () auf den Server hochgeladen (inklusive einer Überprüfung des Dateityps (nur Bilder) und der Dateigröße (< 10MB).
<script>
// Datei vom Formular
const fileInput = document.getElementById('formMelderImage-file');
// event listener
fileInput.addEventListener('change', () => {
fileUpload(fileInput.files[0]);
});
const fileUpload = (file) => {
// Check des Dateityps
if(!['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'].includes(file.type)) {
console.log('Es sind nur Bilder erlaubt!');
return;
} else if(file.size > 10 * 1024 * 1024) { // Check der Groesse (< 10MB)
console.log('Die Datei muss kleiner 10MB sein!');
return;
} else {
// Datei zum FormData object hinzufügen
const fd = new FormData();
fd.append('formMelderImage-file', file);
// `POST` request senden
fetch('/upload/image', {
method: 'POST',
body: fd
})
// Abfangen von Fehlern
.then(res => res.json())
.then(json => console.log(json))
.catch(err => console.error(err));
}
}
</script>
SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data" - 403 Forbidden
404- oder 403-Fehlern nach dem Senden eines Formulars können an der mod_security-Einstellung in Apache auf dem Server liegen.
Das Apaches-Modul mod_security hat standardmäßig ein Upload-Limit von 60 KB, sodass bei jedem größeren Upload ein 403-Fehlercode ausgegeben wird.
Man kann versuchen diese zu deaktivieren, und folgendes zu der .htaccess-Datei hinzuzufügen, man wird aber vermutlich
keinen Erfolg mehr haben (support for .htaccess files was discontinued in 2.x as it raised too many security issues https://stackoverflow.com/questions/19093542/how-to-disable-mod-security-and-mod-security2-in-htaccess/19196856#19196856)
<IfModule mod_security.c>
SecFilterEngine Off
</IfModule>
Oder wenn man direkten Zugriff auf die Apache Einstellungen hat, geht dies auch direkt unter nano /etc/httpd/conf.d/mod_security.conf .
<IfModule mod_security.c>
# Turn the filtering engine On or Off
SecFilterEngine Off
