Erstellen der Drag and Drop Funktion
Zunächst wurden die Funktionen für den Drag and Drop Upload erstellt. Dafür legte ich zunächsteine Variable an, die via .querySelector() die HTML-Klasse des Drag and Drop Feldes beinhaltet.
Codeausschnitt:
var dropZone = document.querySelector('uploadzone');Für Dieses Element werden eventlistener für “dragover” und “drop” erstellt. Diese Listener warten auf die Interaktion des Nutzers.
Codeausschnitt:
dropZone.addEventListener('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});Dropt ein Nutzer ein oder mehrere Bilder in den Bereich nimmt die Konstante fileList, die das Event DataTransfer enhält, die Daten auf.
Codeausschnitt:
dropZone.addEventListener('drop', function (e) {
e.stopPropagation();
e.preventDefault();
const fileList = event.dataTransfer.files;
if (fileList.length > 0) {
getMetadataForFileList(fileList);
};
});Die Funktion getMetadataForFileList() nimmt diese Daten und erstellt für jedes Elementin fileList eine einzelne file Variable via readFile().
Codeausschnitt:
function getMetadataForFileList(fileList){
for (let file of fileList){
readFile(file);
};
};Anschließend wird die Variable file in die Funktion readFile() übergeben. In dieser Funktion wird zunächst ein neuer FileReader() in der Konstanten reader Gespeichert. Anschließend bekommt reader den eventlistener der auf das Ereignis “load” hört (Element vollständig
geladen).
Codeausschnitt:
function readFile(file){
const reader = new FileReader();
reader.addEventListener('load', function (event){
const result = event.target.result;
...}; reader.readAsDataURL(file);
...};Damit keine ungewollten Dateiformate eingefügt werden, wird zunächst auf gültige Bildformate geprüft. Bei falschen Formaten erscheint im Browser ein alert() als Hinweismeldung, welche darauf hinweist das ein nicht zugelassenes Format eingefügt wurde.
Codeausschnitt:
var allowed_extensions = /(jpg|jpeg|gif|png)$/; var error = "";
if (!file.name.match(allowed_extensions)){
error += "Bitte wähle eine jpeg, jpg, gif, png Datei.";
alert(error);
}...
Bei gültigen Formaten wird in die Variable oFormData via der Funktion formData() ein neues Dataobject erzeugt. In dieses wird file eingefügt und der temporäre Name “uploadfile” angehängt. Danach wird ein Ajax request gestartet, der die Variable oFormData an das serverseitige PHP-Skript übergibt.
Codeausschnitt:
...else{
var oFormData = new FormData();
oFormData.append('uploadfile', file);
var jUpload = $.ajax({
url: "/original_upload.php",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: oFormData,
type: 'post'
});
...};...
